ホームページ > 記事 > ウェブフロントエンド > ul li は Firefox で問題が発生し、クラッシュしそうになっています。 。 。神よ助けてください_html/css_WEB-ITnose
ul li は Firefox で問題が発生し、クラッシュしそうになっています。 。 。神よ助けてください_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:44:141139ブラウズ
HTML Firefox
テスト後、ie6、ie7、ie8、および ie9 では問題ありませんが、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> 2 つの
<!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> 上記の場合、まだ問題があります。書くこの種の垂直線は、背景を使用する方が良いでしょう。
なんていい人なんだろう！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。