输入标记的CSS类高度和宽度由chrome进行不同的解释

Question

我开发并测试了HTML div的一部分，当我将该部分放在另一个HTML页面中时。输入标记css的呈现方式不同。所以我进入了调试模式。 CSS框模型显示边距，边框和填充是相同的但尺寸是16x16而不是12x10？我希望它呈现为12x10？造成这种情况的原因是什么？

.pbg{
  text-align:center; 
  width:16px; 
  height:16px;
  float:left; 
  margin-bottom:1px;
}

Answer 1

听起来你可能在其他地方有一个设置为12x10的CSS规则。在检查器中，您应该能够看到已声明12x10而不是16x16的文件和行。然后只需导航到该文件和该行号并进行适当的更改。

或者，如果您想强制所有.pbg元素一直保持在16x16，请将以下内容添加到CSS文件中：

.pbg{
  text-align:center; 
  width:16px !important; 
  height:16px !important;
  float:left; 
  margin-bottom:1px;
}