Joh*_*ohn 5 html css cross-browser
我创建了一个包含以下代码的网页,并在Google Chrome中进行了查看.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
结果是我所期望的,一个30像素蓝色边框的红色框填充整个Web浏览器窗口.但是,当我在Firefox中查看它时,红色框只是一个行高的高度.在IE8中,没有蓝色边框.
如何使Firefox和IE8显示与我在Google Chrome中看到的相同？
附加说明我尝试在页面中添加不同的doctype标签,但这只是让它看起来像Firefox,即1行红色.
为此，我认为你必须诉诸绝对或相对定位；否则，您的高度/边距组合会将底部的蓝线推离屏幕。对于这个简单的情况，这适用于跨浏览器。希望它适用于您更复杂的用例。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>