我尝试在 body 中心创建一个红色背景的十字,截图:
这是 html 片段:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0;
margin:0;
width:100%;
height:100%;
}
.mask{
width:100%;
height:100%;
}
.mask .row{
position:absolute;
left:50%;
width:40px;
margin-left:-20px;
top:50%;
}
.mask .col{
position:absolute;
top:50%;
height:40px;
margin-top:-20px;
left:50%;
}
</style>
</head>
<body>
<div class="mask">
<div class="row" style="height: 2px; margin-top: -1px; background: red;"></div>
<div class="col" style="width: 2px; margin-left: -1px; background: red;"></div>
</div>
</body>
</html>
它在 IE7+、FF、chrome 中按预期工作。演示:http://jsfiddle.net/3f2RE/
但是 div
在 IE6 中有一个意外的高度,截图:
不知道怎么回事?有什么办法可以解决吗?
最佳答案
所以 overflow: hidden
解决了你的问题,所以它的评论者的任务是粘贴评论作为答案。或者提问者应该这样做,这样其他访问者就会知道这个问题有正确答案。
关于css - 高度在 IE6 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24859349/