如此样式何以兼容啊?

彭哥 发布于 2012/07/01 13:30
阅读 248
收藏 0

<!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=utf-8" />
<title>无标题文档</title>
<link href="files/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="content">
<div class="leftdaohang">
<div class="lanmudaohang">栏目导航</div>
<div class="lanmumune">
<ul>
<li><a href="#" title="qqqqqqqqqq" target="_blank">aaaaaaaaa</a></li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
</ul>
</div>
</div>

<div class="bodycontent">
aaa
</div>
</div>
</body>
</html>

SpryTabbedPanels.css

.content {
 font-family: Arial,“宋体“;
 font-size:14px;
 color: #000000;
 width:965px;
 height:100%;
 border: 1px solid #CC3300;
 clip: rect(3px,auto,3px,auto);
 padding: 5px;
 margin-top: 3px;
 margin-right: auto;
 margin-bottom: 3px;
 margin-left: auto;
}
.buton,.buton a,.buton a:hover{ color:#FFFFFF;
}
.bodycontent {
 font-family: "微软雅黑";
 font-size: 14px;
 color: #CC3300;
 text-decoration: none;
 float: right;
 width: 710px;
 padding-top: 5px;
 padding-right: 5px;
 padding-bottom: 5px;
 padding-left: 0px;
 border: 1px solid #CC0000;
}

.leftdaohang {
 font-family: "微软雅黑";
 font-size: 11px;
 line-height: 25px;
 color: #CC0000;
 text-decoration: none;
 float: left;
 width: 230px;
 padding-top: 5px;
 padding-right: 5px;
 padding-bottom: 10px;
 padding-left: 5px;
 border: 2px solid #CC3333;
 list-style-image: url(images/ShowCustomPropertiesPage.png);
}
.lanmudaohang {
 font-family: "微软雅黑";
 font-size: 14px;
 font-weight: bold;
 color: #CC0000;
 text-decoration: none;
 margin: auto;
 height: 45px;
 width: 228px;
 border: 1px solid #CC0000;
 line-height: 45px;
 text-indent: 5px;
}

.leftdaohang ul li {
 font-family: "微软雅黑";
 font-size: 14px;
 line-height: 25px;
 color: #000000;
 text-decoration: none;
 border-bottom-width: 1px;
 border-bottom-style: dashed;
 border-bottom-color: #999999;
 width:188px;
 overflow:hidden;
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}
.lanmumune {
 font-family: "微软雅黑";
 font-size: 14px;
 color: #000000;
 text-decoration: none;
 margin: 0px;
 padding: 0px;
 width: 228px;
 float: left;
 text-align: left;
 border: 1px solid #990000;
}

按IE显示为正常如下图:

 

但按火狐或OPERA就显示 为

加载中
0
愤怒的晃晃
愤怒的晃晃
.bodycontent ,. leftdaohang  针对这两个未清除浮动。
彭哥
彭哥
加了clear:left和clear:right没用,效果一样!郁闷中!
彭哥
彭哥
怎么清除哦!这个一定要清除吗,为什么IE中显示为正常!
0
ui(
ui(

您好.

我想问下,您在测试兼容性的时候,是不是手工打工各种浏览器,然后一个一个看,有没有显示一样?

还是有没有其他的好办法?

谢谢

彭哥
彭哥
回复 @ui( : 呵呵,最终处决于肉眼!
ui(
ui(
回复 @彭哥 : 我的意思是有没有什么测试工具,不用肉眼看就可以检测出兼容性问题.
彭哥
彭哥
回复 @ui( : 可以这样讲,DIV是软控制,比起TABLE排版的话弱多了,但好修改后台样式,就这点方便, 如果你不用肉眼去看的话,难道你还能用手去摸吗?
ui(
ui(
回复 @彭哥 : 意思是在测试兼容性的时候,还是要肉眼去看喽.
彭哥
彭哥
目前,对于IE产品类就用IETEST软件测试,其它的就其本身的浏览器打开测试!像火狐啊和opera等! 就工具来说,Adobe Dreamweaver CS3版本以上就对样式兼容性有非常好的效果,在DW中通过,一般来讲大部分主流浏览器都支持了!
0
xyz555
xyz555
两个float的块后添加一个块 <div style="clear: both;"></div>
彭哥
彭哥
回复 @xyz555 : 我重新改写了样式架构!并测试了IE6-8和火狐,opera等浏览器全通了!
xyz555
xyz555
回复 @彭哥 : 不可能不行,我试过。<divclass="bodycontent">aaa</div><div style="clear: both;"></div>加在这里你确定你没加错没错?
彭哥
彭哥
也试过了无效,后面,重必了下样式,现在可以了!
返回顶部
顶部