输入字段在 IE 11 中潜入带有标签的 div

Posted 2023-03-06

【中文标题】输入字段在 IE 11 中潜入带有标签的 div

【英文标题】：Input field sneaks into a div with labels in IE 11

【发布时间】：2020-06-25 11:27:12

【问题描述】：

CSS：

.container 
    margin-right: 75px;
    float: left;
    position: relative;

.input-large 
    width: 210px;

.label-a 
    float: left;

.label-b 
    float: right;

html：

<div class="container">
    <div>
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>

Result in IE 11 and Chrome (screenshot)

为什么在 IE 11 中输入字段放在两个标签之间，但在 Chrome 中却没问题？

【参考方案1】：

.container 
    margin-right: 75px;
    float: left;
    position: relative;
    width:215px;

.input-large 
    width: 210px;

.lablerowfloat:left;width:100%;
.label-a 
    float: left;

.label-b 
    float: right;

<div class="container">
    <div class="lablerow">
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>

【讨论】：

是的，谢谢，这会起作用。我可以通过 flexbox 做到这一点，我只是想知道为什么它会发生在 IE 中。

你可以参考这个***.com/questions/18019450/…

是的，我知道 IE 上的 flexbox 兼容性，但标签作品之间的简单 justify-content 空间。我很好奇究竟是什么让该示例在 IE 中显示错误并在 Chrome 中正确显示。

【参考方案2】：

这似乎是由于 IE 和 Chrome 采用不同宽度的容器div。

在IE中，容器div的宽度是input、label-a和label-b的宽度之和：

但在Chrome中，容器div的宽度取input的宽度：

由于 IE 和 Chrome 的渲染引擎不同，它们计算元素宽度的方法也不同。如果我们想要在 IE 中同样的显示，我们需要给容器设置一个宽度。

【参考方案3】：

输入元素的大小因浏览器而异。我通过检查浏览器中的元素确认了这一点。我相信 IE 也可能以不同于 chrome 的方式查看 width，例如。内容的宽度或内容的宽度和填充。

（另外，如果您打算使用弹性框，我建议您也可以查看 CSS 网格作为替代方案，因为它可以在 2D 中工作，而不仅仅是在页面下方）。