СТАТИИ

`начало`статии`


Двойни стойности на margin при IE - решения

Бъгът е познат като "Doubled Float-Margin Bug". Вижте някои методи за решаването му.


Бъговете при рендването на CSS елементи в различните брaузери може да докара до полуда всеки. Особенно зле се отразява на ентусиастите, решили да сменят старите таблици с XHTML+CSS средства. Ад! Всъщност... дяволът не е толкова черен.

По същество - когато имаме един блок, който се намира в друг и искаме той да е влвяво - пишем {float:left;}. Ако искаме да е на 20px от ръба -{margin-left: 20px;}. При Internet Explorer, обаче получаваме удвояване на разстоянието.

double_margin.gif

Най-популярното решение на тази ситуация е като се направи един нов блок-контейнер, в който да се поставяме вече съществуващия. На контейнера задаваме {float:left;}, а на блока вътре {margin-left:20px;}. Така няма float и margin на едно място и крайният резултат е еднакъв във всички браузъри.

double_margin1.gif

Това решение работи, но не ми се струва особенно елегантно. Слагаме по още един div, пишем още един стил. Излишно пилеене, което само затруднява четенето в последствие.

Ето едно по-елегантно решение. Прибавяте на вътрешния блок {float:left;},{margin-left:20px}, а за да избегне бъга, добавя и {display:inline}. Както може би вече се досещате, float автоматично ще превърне елемента в блок.

double_margin2.gif

Ето част от определението за float:

Това свойство определя на блок да плава вляво, вдясно или да не е свързан по никакъв начин.

Left
Елементът създава блок, плуващ вляво.Display се пренебрегва, освен ако стойноста му е `none`.

Това означава, че {display:inline} ще бъде пренебрегнато, но в същото време това кара Internet Explorer да не дублира стойноста на margin.


Коментари

 
2000-2018© Asterixworks.com.Всички права запазени.