Home > Article > Web Front-end > ul li在火狐下的问题，快崩溃了。。。大神救命啊_html/css_WEB-ITnose
ul li在火狐下的问题，快崩溃了。。。大神救命啊_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:44:141110browse
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比较好。
好人啊！
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：div在页面底部居中显示_html/css_WEB-ITnoseNext article：各位牛人，帮忙推荐一下CSS方面的经典教材。_html/css_WEB-ITnose