Maison > Article > interface Web > ul li在火狐下的问题，快崩溃了。。。大神救命啊_html/css_WEB-ITnose
ul li在火狐下的问题，快崩溃了。。。大神救命啊_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:44:141137parcourir
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比较好。
好人啊！
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：div在页面底部居中显示_html/css_WEB-ITnoseArticle suivant：各位牛人，帮忙推荐一下CSS方面的经典教材。_html/css_WEB-ITnose