0

私はいくつかの Web サイトに取り組んでおり、水平方向のメニュー間隔に大きな問題があります。1 つの Web サイトは daniellesshoes.com (これは BigCommerce サイトです) もう 1 つは blog.daniellesshoes.com (これは WordPress) です。

私の問題はこれです。私たちはクライアントのためにこれらのウェブサイトを作ります。メニューを紫色にして、li をホバーするとピンク色にハイライトされるようにします。その中で2つの問題。1. クライアントが BigCommerce CSS からメニュー項目を追加すると、スペースが台無しになります..

2 番目の問題は、IE6、7、8、および 9 のすべてが間隔のピクセルの違いを示し、一部の無効化オーバーフローの非表示などです。

だから、1.すべてのスタイルに乗りたい（BigCommerceには、何らかの理由で7つ以上のスタイルシートがあり、すべて互いにオーバーライドしているなど）、自分自身を再設計したい-正しい方法! または 2. 各ブラウザーで同じように表示するには、何を追加する必要があるかを把握します。最後に、それが完了したら、それらを自動的にスペースに入れたいと思います..

上記の Web サイトを表示して要素を調べてから、一体何をすべきか教えてください。ありがとうございました！

4

2 に答える 2

2

リストベースのメニューのルール:

  1. CSS リセットを使用する
  2. タグのスタイルを設定しないでくださいLI(position:、display:、float: 以外)。
  3. タグを使用display:blockしてスタイルを設定するA
  4. フロートを使用している場合はクリアします

私のチュートリアルを参照してください：I Love Lists

于 2012-05-25T20:59:09.833 に答える
0

CSS でアイテムを自動的に間隔をあける唯一の方法は、display: table;andtable-cellとを使用することtable-layout: fixed;です。CSS2.1 は最近どこでもサポートされているため、最新のすべてのブラウザーと IE8 で動作します。

この jsFiddle の最初の例を確認してください: http://jsfiddle.net/aznxD/
リストの CSS をリセットするには、次のように指定します。

ul {
    margin: 0;
    padding: 0;
}

forlist-styleの値をすでに変更している場合は、変更する必要はありません。さまざまなリセット CSS の他の 40 行は、リスト以外のもののためのものです。ここでは OT です。displayli

前のフィドルの 2 番目の例は IE6/7 用で、並べ替えdisplay: inline-block(CSS のコメントと画面の JS 左下部分を参照) と、メニューの項目数とテキストの長さに依存する計算されたパディングを使用します。そのため、アイテムは自動的に配置されません...特定のスタイルシートの条件付きコメントを介して、または class(es) を含む html 要素の周りにこれらの特定のルールを追加できます。

これはピクセル パーフェクトではありませんが、それほど重要ではありません。あなた以外の誰もが、多数のブラウザーとそのさまざまなバージョンでサイトを見ることになります。
職場用と自宅用の 2 つのブラウザーでサイトを表示する人もいるかもしれません。私の例の幅が 960 ピクセルではなく 957 ピクセルになっていることに彼らは気付くでしょうか? 「最新のブラウザ」向けに設計されたほとんどのサイトよりも、古いブラウザに対する注意やテストがまったく行われていないことを、彼らは気にするでしょうか、それとも喜んでいるでしょうか? (最新のブラウザー向けに設計することは問題ではありません。フォールバックのない古いブラウザーをまったく気にしないことは問題です)
あなたの時間は、レスポンシブ Web デザインをサポートするメディア クエリを提供し、おそらく 2 回目または 3 回目にモバイル ファーストを提供し、肥大化した場合は CMS で未使用の CSS ルールをすべて削除することに費やすほうがよいでしょう。将来のメンテナンスと現在のパフォーマンスの向上と、将来。

于 2012-05-25T23:00:53.380 に答える