我有一个要设置样式的html页(使用IE9)。
如下代码:
<style type="text/css">
#komponenter select,
#komponenter input
{
width: 180px;
box-sizing:content-box;
}
.special_box { width: 50px; height: 150px; }
</style>
... snipp ...
<div id="col2" class="kolumn">
@Html.LabelFor(model => Model.Verksamhetskod)
<br />
@Html.TextBoxFor(model => Model.Verksamhetskod)
<br />
@Html.Label("Lat/Long")
@Html.TextBoxFor(m => m.LatitudTecken)
@Html.TextBoxFor(m => m.Latitud)
@Html.TextBoxFor(m => m.LongitudTecken)
@Html.TextBoxFor(m => m.Longitud)
<br />
@Html.Label("3 Överväganden:")
<br />
@Html.TextBoxFor(m => m.Overvagande)
<br />
@Html.Label("1 Ingångsvärden:")
<br />
@Html.TextBoxFor(m => m.Ingangsvarde, new { @class = "special_box" })
<br />
</div>
html可以很好地呈现,问题是.special_box的宽度被上面的css语句覆盖(高度可以正常工作)。我尝试将类放在样式部分的第一位,但没有任何区别。
最佳答案
这是特定性的问题:请改用此方法(假设.special_box
是input
元素)
#komponenter select,
#komponenter input
{
width: 180px;
box-sizing:content-box;
}
#komponenter input.special_box {
width: 50px; height: 150px;
}
像
#komponenter input
这样的规则具有101
的特异性(1个id,0个类,1个元素)而
.special_box
的特异性为10
(1类,0个元素)有关更多信息,请参见http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/