IE10中的高度100％問題。 在IE和所有其他瀏覽器中以Quirks模式工作
[英]Height 100% issue in IE10. Works in Quirks mode in IE and all other browers
問題描述
請參見以下頁面：
http://www.judsondesigns.com/Demos/jscroller/index.html
如果您在IE中注意到，那將導致滾動。 其他瀏覽器都可以。 IE為什么導致滾動？ 我怎樣才能解決這個問題？
謝謝
賈德森
這是我正在使用的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
html, body{
height:100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="display:table; width: 100%; height:100%;">
<div style="display: table-row; background: red">test</div>
<div style="display: table-row">
<div style="display: table-cell; height:100%; width:100%;overflow: hidden ">
<div style=" height:100%; width:100%; overflow:hidden; background: #06F">test123
</div>
</div>
</div>
<div style="display:table-row; background: red;">test</div></div>
</div>
</body>
</html>
和圖片正常的IE10模式：
並在Quirks模式下（我的外觀如何）
2 個解決方案
解決方案1
1 2013-05-22 03:42:44
您應該在包含test123文本的div上設置一個負margin-bottom ，該值的值大於底部table-row的高度。 為了安全起見，您可以將其設置為-100% ，這將在IE中對其進行修復，並且不會在任何其他瀏覽器中破壞它。
這是一個jsFiddle
解決方案2
0 2013-05-22 00:53:17
<div style="width: 100%; height: 100%; display: table; max-height: 100%;">
<div style="background: red; height: 2%; display: table-row;">test</div>
<div style="display: table-row;">
<div style="width: 100%; height: 96%; overflow: hidden; display: table-cell; max-height: 100%; background-color: blue;">
<div style="width: 100%; height: inherit; color: green; display: table;">test123456
asdfasdfasdf </div>
</div>
</div>
<div style="background: red; height: 2%; display: table-row;">test</div></div>
這對我有用
在IE中發現怪癖模式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.