Css-trick ie, imagini de masă și de cauciuc

Anton Young mi-a dat o idee pentru acest post. A întâmpinat o problemă cu care el însuși a reușit cu ajutorul meu indirect.

Am acest bug (da, acesta va fi de aproximativ urmatorul bug-ul IE) nu au întâlnit, așa că am decis să scriu acest post, în primul rând, ca o foaie de ieftin pentru tine pentru viitor, și în al doilea rând, atunci când cineva de la cititori și vizitatori pe blog o dată se va confrunta cu aceeasi problema.







Să luăm în considerare un exemplu. Linia de jos este următoarea:

  • Avem o pagină "de cauciuc" care se întinde pe întreaga lățime a ferestrei browserului.
  • Avem un tabel cu o lățime de 100%.
  • Tabelul au o serie de 5 imagini (în acest exemplu, lățimea lor reală - 250 pixeli), și este necesar să se schimbe lățimea browser-ului atunci când fereastra de imagine sau întinsă redus proporțional, umplând întreaga lățime a tabelului. Acesta este implementat în următorul mod simplu:






Totul este bine, cu excepția unuia "dar" - dacă te uiți la acest exemplu în browser-ul IE6 sau IE7. veți observa că atunci când fereastra browserului este restrânsă, lățimea imaginilor la un moment dat "rămâne blocată" și nu se restrânge în continuare. rezultând în tabelul vylazit dincolo de conținut.

Acesta nu este altceva decât un bug obișnuit al browserului "favorit" - imaginile nu se restrânge dincolo de dimensiunea reală a acestora. În cazul nostru, acesta este de 250 de pixeli.

Ei bine, un truc care vă permite să corectați această neînțelegere. constă dintr-o singură linie de cod CSS pe care trebuie să o aplicați la masa în care sunt situate imaginile noastre:







Articole similare

Trimiteți-le prietenilor: