完美兼容FF与IE的列表写法
2008-01-24 17:03
337 查看
原帖地址:
http://www.cnblogs.com/huacn/archive/2007/06/29/ul_li_xiefa_jianrong_firefox_ie6_ie7.html
前几天朋友一直在搞这个列表的样式与兼容问题,有序列表可能是初学者最烦的问题,做出来总是不哪么顺心,今天我这里发一个我的写法,以下这些在Firefox IE7 IE6这三种浏览器下都完美兼容,没有一点差距,可以看一下CSS的写法.
重点是CSS里面我标注红色哪一段,其实就是Display:block这个东西,只要应用好了,就很少出现兼容性的问题.
还有一点很重要,FF的UL与IE下的ul的margin值是不同的,所以,如果你不给ul设定margin的值的话,哪两个浏览器就会有出入,所以最好的办法就是给ul的margin写上值就没有问题了.
HTML代码:
<div class="item">
<ul>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">全美各媒体测试报告倾巢出动</a></li>
<li><a href="#">非美国公民无缘iPhone</a></li>
<li><a href="#">讨论:报纸还能活多久</a></li>
<li><a href="#">[图]江民KV系列26日升级后出现系统崩溃问题</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
</ul>
</div>
CSS代码:
body{
background:#EEE;
text-align:center;
font-family:宋体, verdana;
font-size:12px;
}
.item {
margin:40px auto;
background:#FFF;
border:1px solid #CCC;
width:250px;
padding:8px;
text-align:left;
}
.item ul {
margin:0;
padding:0;
list-style-type:none;
border:1px solid #F0F0F0;
}
.item ul li { margin:0;padding:0;}
.item ul li a:link,.item ul li a:visited {
width:100%;
background:#F5F5F5;
display:block;
line-height:22px;
border-bottom:1px solid #F0F0F0;
color:blue;
text-decoration:none;
}
.item ul li a:actived { }
.item ul li a:hover{
background:#FFF;
}
http://www.cnblogs.com/huacn/archive/2007/06/29/ul_li_xiefa_jianrong_firefox_ie6_ie7.html
前几天朋友一直在搞这个列表的样式与兼容问题,有序列表可能是初学者最烦的问题,做出来总是不哪么顺心,今天我这里发一个我的写法,以下这些在Firefox IE7 IE6这三种浏览器下都完美兼容,没有一点差距,可以看一下CSS的写法.
重点是CSS里面我标注红色哪一段,其实就是Display:block这个东西,只要应用好了,就很少出现兼容性的问题.
还有一点很重要,FF的UL与IE下的ul的margin值是不同的,所以,如果你不给ul设定margin的值的话,哪两个浏览器就会有出入,所以最好的办法就是给ul的margin写上值就没有问题了.
HTML代码:
<div class="item">
<ul>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">全美各媒体测试报告倾巢出动</a></li>
<li><a href="#">非美国公民无缘iPhone</a></li>
<li><a href="#">讨论:报纸还能活多久</a></li>
<li><a href="#">[图]江民KV系列26日升级后出现系统崩溃问题</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
<li><a href="#">iPhone将能与微软Exchange Server互联</a></li>
</ul>
</div>
CSS代码:
body{
background:#EEE;
text-align:center;
font-family:宋体, verdana;
font-size:12px;
}
.item {
margin:40px auto;
background:#FFF;
border:1px solid #CCC;
width:250px;
padding:8px;
text-align:left;
}
.item ul {
margin:0;
padding:0;
list-style-type:none;
border:1px solid #F0F0F0;
}
.item ul li { margin:0;padding:0;}
.item ul li a:link,.item ul li a:visited {
width:100%;
background:#F5F5F5;
display:block;
line-height:22px;
border-bottom:1px solid #F0F0F0;
color:blue;
text-decoration:none;
}
.item ul li a:actived { }
.item ul li a:hover{
background:#FFF;
}
相关文章推荐
- 2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法
- 完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
- 2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法
- IE、FF的JS兼容写法
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- jquery右下角pop弹窗 完美兼容ie6789 ff chrome
- 兼容IE和FF的js脚本写法
- 转:IE FF中javascript兼容写法
- 转载一个完美兼容IE、FF、Opera的Ajax类支持get、post、自定义回调函数
- JS_兼容IE和FF的写法
- 完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- FF,chrome,ie主流浏览器兼容写法总结
- js自定义滚动条完美兼容ff,IE
- css_兼容IE和FF的写法
- javascript 中 IE与FF的不同之处及其兼容写法
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法
- 完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
- 完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码