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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:44 AM

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 までご連絡ください。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。