1

我有以下html元素：

<fieldset style="margin:20px;border:5px solid red;padding:0;">

        <label class="offset widget" >Title goes here</label>   
        <input class="offset widget" style="padding:0" type="text" name="fname">
        <div class="offset" style="position:relative;width:120px;display:inline-block;">
            <select class="widget" style="position: absolute; left:0;top:0;">
               <option value="en_KW">English</option>
               <option value="ar_KW">Arabic</option>            
             </select>
        </div>
</fieldset>

和CSS样式：

            .offset{
            margin-left:40px;
            margin-right:0;
        }
        .widget{
            width:120px;
            height:16px;
            text-align:right;
            text-height:16px;
            font-size:11px;
            font-family:arial;
            border:2px solid black;
            float:left;
            padding:0;
        }

同样在 jsfiddle：http: //jsfiddle.net/tPzqG/5/

1）为什么如果我将div显示设置为内联边距不考虑？标签和文本输入元素也是内联元素，并考虑了边距。（在 chrome 中，不在 firefox 中）

2）为什么选择高度小于标签和文本输入的高度，尽管为它们三个指定了高度并且它是相同的？

3）文本对齐确实适用于标签，但不适用于选择（仅在 chrome 中）。是否可以在没有方向的情况下解决此问题：rtl？

4）为什么如果在 div 显示为 inline-block 时未指定 div 高度，那么 div 会移动到字段集下方？（仅在 jsfiddle 中）

4

1 回答 1

1

1) 正如您在 Chrome 上的开发人员工具中看到的，div 元素的尺寸为 0x0。这是因为您将块元素放入内联元素。这是不正确的。请记住，当您将浮动或绝对定位到元素时，它会自动成为块元素。

2）我再次链接到 Chrome 开发者工具。在开发人员工具中，您可以看到浏览器引擎在计算选择元素的高度时略有不同。它需要包括边界高度。

在正常情况下：实际高度 = 高度 + 边框顶部、底部高度 + 填充顶部、底部高度

在这种情况下：实际高度 = 高度 - 边框顶部，底部高度 + 边框顶部，底部高度

3) 样式选择不起作用 - 这是正常情况。重新编辑选择元素，它与浏览器兼容，浏览器不允许这样做。当然也有例外，但在每个浏览器中是不同的

4）我认为这与第一点相同。浏览器布局过程变得疯狂并计算错误的元素偏移量。

我建议您阅读有关浮动、定位、选择样式和 arictle 的内容：http: //www.html5rocks.com/en/tutorials/internals/howbrowserswork/

于 2013-02-14T15:20:06.667 回答