html - block div 高度被忽略

Question

我有一个div样式

.metal_rods{        
    max-width:200px;
    background:red; 
    margin:1px;
    display:block;
}

这里是div

<div class='metal_rods' height='10px'> 50 </div> 
<div class='metal_rods' height='110px'> 50 </div> 
<div class='metal_rods' height='90px'> 50 </div> 
<div class='metal_rods' height='0'> 50 </div>

即使 div 具有不同的高度，也会由于某种原因看起来相同。即使显示更改为 inline-block

这是一个演示: http://jsfiddle.net/KfDm9/

我知道我错过了一些简单的东西，但我想不出来

Answer 1

不要使用 height 属性，那就像迪斯科一样。

根据评论更新 height 像迪斯科一样死了。无效，请勿使用。曾经。如果您过去使用过，请构建一个时间机器，然后撤消它。

仅使用 CSS:

<div class='metal_rods' style="height:10px;"> 50 </div> 
<div class='metal_rods' style="height:110px"> 50 </div> 
<div class='metal_rods' style="height:90px'> 50 </div> 
<div class='metal_rods' style="height:0"'> 50 </div>

http://jsfiddle.net/KfDm9/2/

此外，将这些样式属性移动到一个单独的 CSS 文件中，将它们内联写入您的元素是一种不好的形式。你真的想强制所有设备以相同的方式设置元素样式吗？针对不同媒体的单独 CSS 样式表意味着您可以根据媒体和分辨率设置不同的元素样式!您可以为浏览器、打印机、平板电脑、智能手机和尚未发明的事物设置不同的样式。