IE 6下のposition位置決め子要素がオーバーフローし、親要素が拡張された解決策.
1466 ワード
もっと読む
いくつかの通常のページレイアウトでは、私たちは常にpositionによってHTML要素を位置決めすることによって、私たちが望む効果を実現する必要があります.しかし、この方法はIE 6においてしばしば様々な問題が発生する.例えば、親要素以外の部分要素をオーバーフローさせたいですが、父要素自体と他の兄弟要素のスタイルに影響を与えます.
しかし、IE 6では、父の要素が布団の要素を広げています.width値は400 pxになりました.この場合、サブ要素right:100 px属性が作用して、100 pxを左に移動させるという点で、IE 6は他のブラウザの効果と同じです.次の図のように
ですから、私たちは父要素にoverflow:hidden属性を追加して、IE 6の布団の要素で開けないようにします.しかし、IE 7+、chrome、firfoxの中でオーバーフロー部分がhiddenに落ちました.IE 6はありません.そこで、IE 6の親要素であるoverflow:hiddenはposition:relative属性を持つサブ要素に対して無効であるが、布団の要素の拡張を防ぐことができるという結論を出した.だから、父の要素のhackをこのように書くことができます.
いくつかの通常のページレイアウトでは、私たちは常にpositionによってHTML要素を位置決めすることによって、私たちが望む効果を実現する必要があります.しかし、この方法はIE 6においてしばしば様々な問題が発生する.例えば、親要素以外の部分要素をオーバーフローさせたいですが、父要素自体と他の兄弟要素のスタイルに影響を与えます.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
しかし、IE 6では、父の要素が布団の要素を広げています.width値は400 pxになりました.この場合、サブ要素right:100 px属性が作用して、100 pxを左に移動させるという点で、IE 6は他のブラウザの効果と同じです.次の図のように
ですから、私たちは父要素にoverflow:hidden属性を追加して、IE 6の布団の要素で開けないようにします.しかし、IE 7+、chrome、firfoxの中でオーバーフロー部分がhiddenに落ちました.IE 6はありません.そこで、IE 6の親要素であるoverflow:hiddenはposition:relative属性を持つサブ要素に対して無効であるが、布団の要素の拡張を防ぐことができるという結論を出した.だから、父の要素のhackをこのように書くことができます.
1
.father{ width:300px; height:300px; background:#96F; margin:0 auto; _overflow:hidden; }