Html 在IE中有人能解决这个布局问题吗？

下面是布局问题的链接。有人知道为什么IE中会出现这样的问题吗？i、 e.为什么文本框超出了外部div？在Chrome和Firefox中都可以

这是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>

#登录箱{
宽度：336px；
边框：1px纯红；
填充物：5px；
}
#罗吉内梅尔酒店{
边框：1px纯蓝色；
填充物：5px；
宽度：100%；
}

这一切都与盒子模型有关

实际的

#loginBox

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

现在

#loginEmail

设置为相对于其父宽度的100%，即348px。现在加上填充和边框，它就变成了360px。由于

#loginBox

的内部只有336px，因此它自然会出血

一个快速的补救方法是将

框大小：边框框

添加到

#loginEmail

中，这样它就不会流血（这样它就考虑到了100%的边框和填充）。但是，这仅在IE8+中受支持

---

有关此属性以及浏览器支持此属性的详细信息，请单击它，因为您在#loginEmail中添加了100%宽度和5px填充。padding: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;
  }

---

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

box-sizing: border-box;

---

这是因为#loginEmail padding 5px。拆下它并使用顶部+底部填充物。并使用文本缩进：5px将文本向左移动5倍

即使这样也行，但我发现盒子大小的样式很容易修复。谢谢。是的，它会工作，但它与IE不兼容