本文提供了一个在多种浏览器下测试通过的网页布局示例，包括Firefox 1.5、IE5.5、IE6.0及Opera 8.5。示例使用XHTML 1.0 Transitional标准，展示了如何利用CSS实现不同宽度的浮动元素，适用于早期浏览器的兼容性需求。
在firefox1.5，IE5.5，IE6.0，Oprea8.5下测试通过。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div {
height: 5em;
line-height: 5em;
text-align: center;
margin: 0;
padding: 0;
}
#d1, #d3, #d4, #d6 {
float: left;
background: #CCC;
}
#d1 {
width: 20%;
}
#d2 {
float: left;
width: 30%;
background: red;
}
#d3 {
width: 50%;
}
#d4 {
width: 200px;
margin-right: -3px;
}
#d5 {
background: red;
line-height: 1.4em;
text-align: left;
}
#d6 {
width: 300px;
float: right;
margin-left: -3px;
}
div[id="d4"] {
margin-right: 0 !important;
}
div[id="d6"] {
margin-left: 0 !important;
}
-->
</style>
</head>
<body>
<h2>百分比宽度</h2>
<div id="d1">20%</div>
<div id="d2">30%</div>
<div id="d3">50%</div>
<h2>自适应</h2>
<div id="d4">left:200px</div>
<div id="d6">right:300px</div>
<div id="d5">自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div {
height: 5em;
line-height: 5em;
text-align: center;
margin: 0;
padding: 0;
}
#d1, #d3, #d4, #d6 {
float: left;
background: #CCC;
}
#d1 {
width: 20%;
}
#d2 {
float: left;
width: 30%;
background: red;
}
#d3 {
width: 50%;
}
#d4 {
width: 200px;
margin-right: -3px;
}
#d5 {
background: red;
line-height: 1.4em;
text-align: left;
}
#d6 {
width: 300px;
float: right;
margin-left: -3px;
}
div[id="d4"] {
margin-right: 0 !important;
}
div[id="d6"] {
margin-left: 0 !important;
}
-->
</style>
</head>
<body>
<h2>百分比宽度</h2>
<div id="d1">20%</div>
<div id="d2">30%</div>
<div id="d3">50%</div>
<h2>自适应</h2>
<div id="d4">left:200px</div>
<div id="d6">right:300px</div>
<div id="d5">自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
