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

问题描述：

以下是布局问题的链接。有谁知道为什么它在IE中显示出来，并修复它？即为什么文本框超出了外部分区？在Chrome浏览器中都可以使用Chrome &。有没有人有解决这个布局问题在IE中？

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>

答

它与盒子模型有关。

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

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

一个快速的补救措施是添加box-sizing:border-box到#loginEmail所以它不会流血（所以它会考虑100％的边框和填充）。但是，这仅在IE8 +中受支持。

有关此属性和支持哪些浏览器的详细信息，check this page

答

它，因为你已经添加宽度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; 
    }

即使是这样，但我发现箱子大小的风格是一个简单的修复。谢谢。 – Jonna 2012-02-26 19:12:38

是的，它会工作，但它与IE Abhidev 2012-02-27 05:02:18

答

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

box-sizing: border-box;

答

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

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

相关推荐