我有一个像这样的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code: NewYork</title>
<link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
<input type="text" />
</body>
</html>
我的 CSS 是：
input {
background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
现在，当窗口宽度为 909 像素时，将应用 CSS。显然不是滚动条问题。我对这个简单的问题感到抓狂。我用Chrome和IE10测试过，都是一样的。
有人可以帮我解决我在这里做错的事情吗？
我使用了这个 HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code: NewYork</title>
</head>
<body data-ng-app="us">
<input type="text" />
</body>
</html>
使用像这样的更简单的媒体查询声明：
@media (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
它在这里工作得很好：http://jsbin.com/ubehoy/1
调试用Firefox 响应式设计视图并拖动缩放器，当达到宽度限制时，它会正确更改输入背景颜色。
尝试使用 Chrome 26.0.1410.64 m/IE 10，效果也很好。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
