CSS - 无法更改移动设备文本框的宽度/高度答案

【问题标题】：CSS - Can't change width/height of textbox for mobile devicesCSS - 无法更改移动设备文本框的宽度/高度
【发布时间】：2013-11-19 20:42:56
【问题描述】：

我在尝试根据用户设备尺寸调整 CSS 时遇到问题。我正在使用以下代码：

@media only screen and (max-width: 700px) {
#form input[type=text]
  {
  width: 100px;
  height: 50px;
  margin: 95px -60px 0 15px;
  box-shadow: inset 0px 0px 3px 1px grey;
  border:1px lightgrey solid;
  border-radius: 4px;
  text-align: center;
  font-family: times;
  font-size: 10px;
}
}

所有设置都会正确应用并更改原始 CSS，但尺寸保持不变。这怎么可能？这是一个 CSS 错误吗？如果确实应用了选择器，则选择器是正确的，但尺寸不正确。不是缓存问题，我在好几台设备上都试过了。

非常感谢您的帮助，弗雷德里克

【问题讨论】：

标签： css mobile textbox height width

【解决方案1】：

您可以发布代码链接吗？

问题是否仅出现在移动设备上？当您将浏览器窗口的宽度调整为小于 700 像素时会发生什么？

这种错误通常是由于代码中其他地方的选择器过于具体，这使得它们难以覆盖。

尝试在声明的末尾添加 !important 以查看是否可以覆盖样式。请注意，将 !important 保留在其中通常是不好的做法，因此，如果这对您有用，请在代码中搜索有问题的选择器并对其进行调整，直到您的媒体查询可以覆盖为止。

【讨论】：

非常感谢您的回复。添加 !important 确实有效，这很奇怪，因为除了正常属性之外，这些属性没有其他定义。再说了，如果属性之间有干扰，岂不是全部都被覆盖掉了？只有文本框的实际尺寸不会生效，其余的工作正常。您能否详细说明为什么使用 !important 在特定方面是不好的做法？有什么需要注意的，也许是兼容性方面的？再次，非常感谢！
不看你的代码真的很难说。出于几个原因，这是不好的做法。首先，并非所有浏览器都支持重要声明。以 Internet Explorer 为例。但由于您在移动页面中使用它，它可能对您有用。请务必检查 android 和 iPhone 上的几个版本的移动浏览器。
其次，您基本上是在告诉浏览器不要理会在文档中与术语“级联样式表”相矛盾的任何其他地方更改选择器的任何尝试。最后，任何时候你想在样式表中覆盖该样式，你都必须再次添加重要的东西，这会使问题永久存在并增加你的 css 文档的文件大小。