ul li は Firefox で問題が発生し、クラッシュしそうになっています。。。神よ助けてください_html/css

ul li は Firefox で問題が発生し、クラッシュしそうになっています。。。神よ助けてください_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:44:14

オリジナル

1134 人が閲覧しました

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>

ログイン後にコピー

上記の場合、まだ問題があります。書くこの種の垂直線は、背景を使用する方が良いでしょう。

なんていい人なんだろう！