Heim > Artikel > Web-Frontend > ul li在火狐下的问题，快崩溃了。。。大神救命啊_html/css_WEB-ITnose
ul li在火狐下的问题，快崩溃了。。。大神救命啊_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:44:141139Durchsuche
HTML 火狐
经测试，在ie6,ie7,ie8,ie9上都ok，唯独在ff下有问题，截图如下：ie6,ie7,ie8,ie9下运行效果：
ff下运行效果：
代码如下：
<!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><title>title</title><style type="text/css">*{margin:0;padding:0;}ul{width:980px;height:33px;margin:0px auto;list-style:none;border:1px solid red;}ul li{float:left;line-height:33px;text-align:center;}li a{float:left;width:82px;background-color:green;}</style></head><body><ul><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li><li>|</li><li><a>aa</a></li></ul></body></html> 分析发现：ie和ff对li中'|'解释的宽度不一样，不管我怎么设置都没用，是不是ff对li有最小宽度的设置？跪求大神指教。万分感谢！
回复讨论(解决方案)
<!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><title>title</title><style type="text/css"> * { margin: 0; padding: 0; } ul { width: 980px; height: 33px; margin: 0px auto; list-style: none; border: 1px solid red; } ul li { float: left; line-height: 33px; text-align: center; } li a { float: left; width: 82px; background-color: green; } .Nwidth { width: 1px;; } </style></head><body><ul> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li> <li class="Nwidth">|</li> <li><a>aa</a></li></ul></body></html> 分别对两个
<!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</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { width: 980px; height: 33px; margin: 0px auto; list-style: none; border: 1px solid red; } ul li { float: left; line-height: 33px; } li a { float: left; width: 82px; background-color: green; text-align: center; } span{ display: inline-block; background-color: #000000; height: 23px; width: 1px; margin-top: 5px; } </style></head><body><ul> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a><span></span></li> <li><a>aa</a></li></ul></body></html> 上面那个还是有问题，写这种竖线的话，还是用background比较好。
好人啊！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：div在页面底部居中显示_html/css_WEB-ITnoseNächster Artikel：各位牛人，帮忙推荐一下CSS方面的经典教材。_html/css_WEB-ITnose