ウェブフロントエンド開発の細部

1 選択タグは閉じられている必要があります <select></select>

2 左右にレイアウトする場合、片側をフローティングにして、フローティング側の幅を設定し、もう一方の余白をフローティング側の幅 + 実際の余白に設定することができます。以下を参照してください。

.top .top_left{幅:250px; フロート:left; 高さ:500px;}
.top .top_right{高さ:500px; 左余白:260px;}

しかし、これはIE6で3pxのバグを引き起こします。ハック、つまり*margin-left:257pxを使用できます。最善の方法は、.top_rightもフロートさせることです。これにより、3pxのバグが解消されます。つまり、幅設定のダブルフロートになります。

3 コンテナの幅をコンテンツの幅より小さく設定すると、最新のブラウザでは正常に表示され、幅を超えるコンテンツも表示でき、コンテナが拡大することはありません。しかし、IE6ではそうではありません。IE6の幅はmin-widthなので、コンテナが引き伸ばされ、このコンテナを基準とした絶対的な相対的な配置とマージンに問題が生じます。解決策としては、コンテナの幅を設定しないか、幅をコンテンツの最大幅以上に設定することです。

4 !important 次のコード:

#a{左余白:30px!重要; 左余白:20px;}

上記の例では、IE6.0 ではレイヤー a の左余白は 20 ピクセルですが、Firefox では左余白は 30 ピクセルになります。これは、CSS では !important が優先度を意味するためです。IE はこの属性を認識できないため、IE では「margin-left:20px;」オプションのみを呼び出すことができます。そのため、同じコードでも Firefox と IE では異なるスタイルで表示されます。

5 互換性-------IE6/7 の li 要素の下部に 3px のバグがある

IE6 および 7 では、li にフローティング要素が含まれている場合、li には 3px の追加の下部余白が設定されます。解決策は 2 つあります。

1: li に float 属性を追加します。属性値は none 以外の任意の値にすることができます。

2. li に vertical-align 属性を追加します。属性値は任意の値にすることができます。

問題を解決するという点では、この 2 つの方法に違いはありません。どちらの方法も、対応する CSS 属性を追加することで、li の haslayout を刺激します。ただし、li にフローティングを追加すると、それをクリアする必要があるため、この問題を解決するには方法 2 の方が適しています。これは難しい問題です。フローティングによって発生する問題を解決する方法はたくさんありますが、目に見えないコードの負担が増加し、それは見たくないものなので、方法 2 をお勧めします。

6 左右の 2 つの div の高さが同じレイアウトによく遭遇します。両方の div の高さは設定されていますが、1 つの div の高さが IE6 で引き伸ばされます。これは、IE6 で設定された高さが最小の高さに等しいのに対し、FF で設定された高さは最小の高さと同じであるため、IE6 では引き伸ばされるからです。解決策は、div に overflow: hidden を追加することです。

<<: Vueコンポーネントのカスタムイベントの詳細な説明

>>: Tomcat マルチレイヤーコンテナの設計に関する簡単な説明