61,112
社区成员
发帖
与我相关
我的任务
分享奇怪的样式问题，浏览器下的不兼容？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<meta name="keywords" content="title"/>
<meta name="description" content="title"/>
<style type="text/css">
.banner {
border:1px solid #dcdae2;
width:414px;/*TODO chrome和firefox下有一个像素的区别，firefox最小需要设置为415*/
height:96px;
clear:both;
overflow:hidden;
}
.banner ul {
list-style:none;
margin-left:0px;
margin-top:0px;
padding:0px 0px 0px 10px;
}
.banner ul li{
float:left;
overflow:hidden;
width:190px;
height:20px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:0px;
padding:0px;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid #dcdae2;
}
.banner ul li a.title{/*TODO 此处显示效果在IE和在Chrome，Firefox中显示的效果有差别*/
display:inline-block;
margin:0px;
padding:0px;
height:18px;
}
.banner ul li a.show{
margin:0px;
padding:0px;
height:18px;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li>
<a class="title">·</a>
<a class="show" target="_blank" href="#">“平凡人”再度出手显非凡手法</a>
</li>
<li>
<a class="title">·</a>
<a class="show" target="_blank" href="#">“平凡人”再度出手显非凡手法</a>
</li>
<li>
<a class="title">·</a>
<a class="show" target="_blank" href="#">“平凡人”再度出手显非凡手法</a>
</li>
<li>
<a class="title">·</a>
<a class="show" target="_blank" href="#">“平凡人”再度出手显非凡手法</a>
</li>
<li>
<a class="title">·</a>
<a class="show" target="_blank" href="#">“平凡人”再度出手显非凡手法</a>
</li>
<li>
<a class="title">·</a>
<a class="show" target="_blank" href="#">“平凡人”再度出手显非凡手法</a>
</li>
</ul>
</div>
</body>
</html>
路过的说明一下，两处标有TODO地方的，浏览器不兼容行问题如何解决？谢谢
...全文
请发表友善的回复…
发表回复
我自是年少-韶华倾负 2012-09-06
- 打赏
- 举报
首先，我也发现一个奇怪的现象。就是你的li前面的小圆点其实有很多办法可以加，但是你特意用一个a标签来加一个圆点我不知道是不是有什么特殊的意义。一般的解决办法是：
另一个办法是，用图片把圆点截图成背景图片。
.banner ul {
list-style:none;这个去掉
margin-left:0px;
margin-top:0px;
padding:0px 0px 0px 10px;
}
另一个办法是，用图片把圆点截图成背景图片。
.banner ul li{
float:left;
overflow:hidden;
width:190px;
height:20px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:0px;
padding-left:xxpx;这里的数值是图片的宽度。
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid #dcdae2;
background:url(圆点图片) no-repeat;
}
<ul>
<li>
<a class="show" target="_blank" href="#">“平凡人”再度出手显非凡手法</a>
</li>
</ul>
