Question

以下是布局问题的链接。有谁知道为什么它在IE中显示出来并且修复它？即为什么文本框超出了外部div？ Chrome和Chrome都很好。 Firefox浏览器。

http://nothing123.s3.amazonaws.com/test-ie.htm

这是html。

<style>
  #loginBox {
    width: 336px;
    border: 1px solid red;
    padding: 5px;
  }
  #loginEmail {
    border: 1px solid blue;
    padding: 5px;
    width: 100%;
  }
</style>

<div id="loginBox">
  <input type="text" id="loginEmail"/>
</div>

Answer 1

它与盒子模型有关。

实际#loginBox实际宽度等于宽度+填充+边框。您的loginBox现在是348px（336+（5x2）+（1x2））：

现在#loginEmail相对于父宽度设置为100％，即348px。现在添加它的填充和它的边框，它变成360px。由于#loginBox的内部部分仅为336px，因此它自然会渗出。

快速补救措施是将box-sizing:border-box添加到#loginEmail，这样它就不会出血（因此它会考虑边框和填充量100％）。但是，这仅在IE8 +中受支持。

有关此媒体资源及其支持内容的更多信息，请check this page

Answer 2

因为您已将宽度100％和填充5px添加到#loginEmail。填充：5px将宽度加起来然后变得超过100％，因此它正在流出div。要解决此问题，请以px或填充百分比指定宽度。 e.g

#loginEmail {
    border: 1px solid blue;
    padding: 1%;/*total 2% for left(1%) and right(1%) padding*/
    width: 97%;/*97 + 2%(padding) = 99%*/
  }

OR

#loginEmail {
    border: 1px solid blue;
    padding: 5px;
    width: 300px;
  }

Answer 3

将此css样式添加到#loginEmail可以解决问题

box-sizing: border-box;

Answer 4

因为#loginEmail填充5px。取下它并使用填充顶部+底部。并使用text-indent：5px将文本移动到左侧5x;

有没有人在IE中有这个布局问题的解决方案？

4 个答案: