All geek questions in one place

Firefox misinterprets margin. Maybe a mistake?

here is the minimum version to reproduce the failure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <style type="text/css"> .clear{clear:both;} .col{float:left;} .row{margin-bottom:30px;background-color:red;} </style> </head> <body> <div class="row"> <div class="col">Lorem Ipsum</div> <div class="clear"></div> </div> </body> </html>

Is this a Firefox bug or am I misunderstanding something. Edit: Forgot to explain the problem. When im uses margin-bottom for .row in combination with float in .col, then the element will be reset to the same value as the bottom edge of .row.

+4
source share
7 answers

I'm not quite sure why Firefox behaves differently with other browsers here. This is due to folding fields .

However, you can easily fix it (without moving down in Firefox, consistency between browsers):

  • Adding overflow: hidden to .row as an alternative way to clear the fleet.

Then you can remove the <div class="clear"></div> because it is no longer required.

+2
source

It looks great:

enter image description here

Jsfiddle

You will need padding-bottom:30px; instead of margin-bottom:30px;

+1
source

I think you are suggesting that it should skip the 30px red line below? Then you want to fill the bottom. The bottom edge will span a gap of 30 pixels between the top and bottom elements below it.

check out this script what i mean

0
source

no failure, make another div with class = "row" at the bottom and you will see the bottom edge:

 <div class="row"> <div class="col">Lorem Ipsum</div> <div class="clear"></div> </div> <!-- here is 30px space --> <div class="row"> <div class="col">Lorem Ipsum</div> <div class="clear"></div> </div>
0
source

I think the problem for him is that when you use firebug and make the edge of the field bigger ... then the body will go down.

If you use height, the body will not fall. Tested in FF 3.6.15

Or use a gasket with an edge ... then the body does not go down.

Add to my comments here:

 .row { background-color: red; margin-bottom: 30px; padding-bottom: 1px; }
0
source

The problem is with removing the elements from the regular stream, and you expect this element to act the same way. Firefox acts as it should. Sorry, I don’t have time for this.

0
source

thirty seconds , you're right - this is due to the expansion of the fields. I was in a similar situation. However, you cannot say that this is only a FireFox error. In fact, in Chrome my fields were not used for collapse even without a float. In FireFox, on the other hand, the fields crashed for me, despite the broken float (with overflow: hidden / automatic, cleared element in between or something else). Funnily enough, the fields are crumbling between the child and the parent, which should not happen in accordance with the W3C specifications. Moreover, a positive addition fixed this problem.

As a conclusion, I can say that no browser complies with 100% W3C / IEEE / ISO standards. However, I don't care which browser complies with the exact standard. The important thing is that they all comply with the same standard. This does not happen, and I doubt it will ever be.

0
source

Source: https://habr.com/ru/post/1343306/

More articles:


All Articles