有沒有人有解決這個佈局問題在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>

來源

2012-02-26 Jonna

它與盒子模型有關。

實際的#loginBox實際寬度等於寬度+填充+邊框。你的登錄框現在是348px（336+（5x2）+（1x2））：

現在#loginEmail相對於它的父寬度設置爲100％，這將是348px。現在添加它的填充，它是邊框，它變成360px。由於#loginBox的內部部分僅爲336px，因此它自然會流血。

一個快速的補救措施是添加box-sizing:border-box到#loginEmail所以它不會流血（所以它會考慮100％的邊框和填充）。但是，這僅在IE8 +中受支持。

有關此屬性和支持哪些瀏覽器的詳細信息，check this page

來源

2012-02-26 07:36:36 Joseph

它，因爲你已經添加寬度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; 
    }

來源

2012-02-26 07:40:00 Abhidev

即使是這樣，但我發現箱子大小的風格是一個簡單的修復。謝謝。 – Jonna 2012-02-26 19:12:38

是的，它會工作，但它與IE <8瀏覽器不兼容。閱讀此內容瞭解更多信息http://css-tricks.com/box-sizing/ – Abhidev 2012-02-27 05:02:18

添加此css樣式到#loginEmail解決問題

box-sizing: border-box;

來源

2012-02-26 07:42:57

因爲#loginEmail填充爲5px的啓示。刪除它並使用填充頂部+底部。並使用text-indent：5px將文本移動到左側5x;

來源

2012-02-26 07:43:40

有沒有人有解決這個佈局問題在IE中？

回答

相關問題