Jak naprawić błąd przeglądarki Internet Explorer 7 podczas korzystania z szerokości w układzie?

Question

Proszę, pomóżcie mi w tym. Potrzebuję utworzyć układ przy użyciu szerokości procentowych. Mam opakowanie o szerokości 100%.

Teraz mam DIV (główne otoki .. Chcę, aby utrzymać go w 94% procentach szerokości .. 94% 100% ciała) .. w porządku w porządku

Więc aby to proste.

-> korpus 100% szerokości ustawione

-> Pojemnik 94% szerokości

---> pierwszego dziecka dział 70% płukanki po lewej stronie (70% pojemnika)

- -> Drugie dziecko dział 30% prawy element pływający (30% pojemnika)

Ale mają 2 równe kolumny poniżej pierwszego dziecka DIV

-----> 50% i 50% szerokości procentowego

Błąd: W ie7 .. ostatnia kolumna jest wyświetlana na dole .. jej niewłaściwie pływa .. Jeśli zmniejszę szerokość do 29,9% !!! to działa .. myślę, że ie7 ma błąd w traktowaniu szerokości procentowych lub coś .. Proszę wyjaśnij to. Mam nadzieję, że pojawi się problem, ponieważ css/html jest po prostu zbyt długo .. Mam tylko nadzieję, że jego wspólny problem .. :(

Oto CSS na DIV .. nadzieję, że pomoże :)

body { 
width: 100%; 
background: #fff; 
text-align: center; 
font-size: 12px; 
} 

#wide-primary { 
background: #fff url(img/shadow1.png) repeat-x top; 
position: relative; 
top: -1px; 
} 

#primary { 
width: 94%; 
margin: 0 auto 0 auto; 
text-align: left; 
} 

#features { 
float: left; 
width: 70%; 
padding: 2% 0 0 0; 
} 

.featurebox { 
float: left; 
width: 48%; 
padding: 0 2% 3% 0; 
} 

#lastnews { 
float: right; 
width: 30%; 
padding: 2% 0 2% 0; 
} 

Answer 1

Problem polega na zaokrąglaniu subpikseli. Kiedy projektujesz z procentami, pojawią się sytuacje, w których matematyka nie daje pełnych pikseli (70% z 721 pikseli to 504.7 piksele). 721 jest arbitralny, ale używając procentów wybierzesz dowolne liczby. Nie da się tego uniknąć. Większość przeglądarek wymyśla rozwiązanie do zaokrąglania, które nie narusza układu. IE7 (i starsze) po prostu zaokrąglić w górę. Zaokrąglanie do szerokości kontenera o wartości 721px będzie obejmować jedno pudełko o rozmiarze 505 pikseli i drugie o rozmiarze 217 pikseli o łącznej wartości 722 pikseli - więcej niż 100%. W tym momencie IE decyduje, że drugie pole nie pasuje i spada poniżej.

Istnieją różne rozwiązania w zależności od sytuacji. Nicole Sullivan ma ciekawe rozwiązanie oparte na wykorzystaniu "przepełnienia: ukryte" na twojej ostatniej kolumnie, a nie na połączeniu typu "float/width". Używam go, kiedy mogę. Sprawdź tutaj:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Innym rozwiązaniem, które znalazłem, gdy „przepełnienie” po prostu przyzwyczajenie wyciąć to, aby dodać niewielką marżę ujemną do ostatniego elementu w wierszu. Jeśli przesuwasz się w lewo, dodaj po prawej margines ujemny o wartości kilku pikseli. Przesuwając się w prawo, dodaj go w lewo. Nie spotkałem się z żadnymi negatywnymi skutkami (chociaż chętnie usłyszałbym, czy inni).

Nadzieję, że pomaga. Twoje zdrowie.

Answer 2

Oto proste rozwiązanie tego problemu:

div { 
*min-width: 100%; 
} 

przetestowane w IE7.

Answer 3

To jest, czego używam, aby rozwiązać ten problem w IE 7.

<!--[if IE 7]> 
    <style> 
     body { 
     padding:0 1% 0 0; 
     width:101%; 
     } 
    </style> 
<![endif]--> 

Answer 4

Spróbuj wykonać następujące czynności:

div { 
    width: 100%; 
    *overflow: auto; 
} 

To działa dobrze w IE7.