Safari上的布局差异（右边缘为负数）

Question

I stumbled upon a difference in layout rendering between Safari and Chrome/Firefox and I don't know which one is "right".

You can check the jsfiddle here

On Firefox/Chrome the layout is as expected, the yellow div is right after the red ones. But on Safari, the yellow div is positioned under the red ones.

After investigating what I did wrong I found out the bug comes from the CSS class E whose property margin-right (value: -11px) is bigger than the width property (value: 10px) for my div.

I think I understand why Safari renders it this way. The width of div of class B is computed as being the sum of the widths of its children as they have the property float: left; .

Here it is widthB = widthB2*2 + widthE + marginRightE + widthC or marginRightE < -widthE so widthB is not large enough to contain each div next to each other.

So my questions are:

1. Am I right in my understanding of what Safari does?
2. Why do Chrome and Firefox render differently? Are they just not decreasing the width of the parent div based on a negative margin-right ?
3. Would the proper correction to always have a margin-right lesser or equal to the width of a div in this case?

Thank you!

HTML:

<div class="A">
  <div class="C">
    <div class="B">
      <div class="B2"></div>
      <div class="B2"></div>
      <div class="E"></div>
      <div class="C">
        <div class="D"></div>
      </div>
    </div>
  </div>
</div>

CSS:

.A {
  background-color: blue;
  height: 200px;
}

.B {
  height:100px;
}
.B2 {
  background-color: red;
  height: 100px;
  width: 100px;
  float: left;
}
.C {
  float: left;
}
.D {
  height: 40px;
  width: 40px;
  float:left;
  background-color: yellow;
}
.E {
  height: 50px;
  width: 10px;
  position: relative;
  left: -10px;
  margin-right: -11px;
  background-color: black;
  float: left;
}

Answer 1

I'm not sure what you expect to happen with the CSS in the JS fiddle. You are delving into undefined behaviour. I say this because:

• 'C' is floated but does not have a defined width. This leads to issues in various browsers depending on the complexity of the layout.

• None of the floated elements are ever cleared. When floating it is imperative that a clearfix of some description is used, whether it is clear:both , etc.

If you tweak the mark-up and add a clear-fix, you see that the content is always 239px . See http://jsfiddle.net/eaFn9/

However , it seems like the relatively positioned item 'E' and margin is having a negative impact on the width calculation, as Chrome's web inspector seems to always report oddly for the negative margin on this element.

If you play around with this in web inspector you can see it's almost as if the negative margin is the cause of the drop. I think it may be due to a container that does not have a width, and isn't position relative in itself.

How to fix?

Personally, I would want to re-write your layout to include fixed widths on all floats, reduce nesting of floats and clear where possible. It seems overly complex but without a real world use case it's hard to rewrite.

However, It seemed to me that you can wrap 'B2' + 'E' elements in a wrapper that is floated and relatively positioned, then use absolute positioning on 'E' to give the same affect and remove the negative margin.

This is the JSFiddle I came up with: http://jsfiddle.net/jV3Ub/

Answer 2

Sorry, this is not really an answer but it's too long to make it a comment... Anyway, it took me a minute to figure this out.

I used Firefox 19 on Mac OS X 10.8.2, Chrome 24.0 (Mac) and Safari 6.0.2 (Mac as well). Using the web inspector tools, I realized the divs are not computed the same way indeed. I suck at calculations, but I took the time to sit down and look at this thoroughly, and I do understand Safari's calculations the same way you do.

In Safari, it seems that div B isn't wide enough to contain the yellow div (C) so it seems to reject it to the bottom. For the record, in my tests, I see the yellow div to the right of the red div in FF and Chrome, while Safari shows it right underneath the red, and to the upper left. I am not sure this will help, but I can only recommend you to use the web inspector tools now integrated to all modern browsers to debug this.

I'm not sure about why this happens, all I know is that by only changing the width of E by 1px, like so:

.E {
  height: 50px;
  width: 11px; /* added 1px to this property */
  position: relative;
  left: -10px;
  margin-right: -11px;
  background-color: black;
  float: left;
}

it displays correctly in Safari.

Answer 3

Make the following changes to classes .D and .E :

.D {
  float:left;
  height: 40px;
  width: 40px;
  background-color: yellow;
  margin-left: -11px;
}
.E{
  height: 50px;
  width: 10px;
  position: relative;
  left: -10px;
  background-color: black;
  float: left;
}

DEMO: http://jsfiddle.net/uryJJ/22/

I hope this helps!

Answer 4

SECOND EDIT:

I think we should link these two questions: https://stackoverflow.com/questions/4989930/css-negative-margin and why use negative margins? to this one.

Also See the W3C spec on margin: http://www.w3.org/TR/CSS2/box.html#margin-properties . Section 8.3.1 Might actually explain what is going on with your sample. A collapsing margin issue not rendering correctly in Safari.

ORIGINAL POSTING:

So my questions are:

1) Am I right in my understanding of what Safari does. Why do Chrome and Firefox render differently? Sounds like that might be it, but, really, who cares? You are not getting the results you want. You should change your code unless you don't care about Safari users.

2) Are they just not decreasing the width of the parent div based on a negative margin-right? Probably, but again, not really important.

3) Would the proper correction to always have a margin-right lesser or equal to the width of a div in this case? I would say yes. To fix the issue and get the results you want I would move the div with class E inside the right most div with class B2. Then float E to the right and remove the position, left and margin-right attributes.

.E {
height: 50px;
width: 10px;
background-color: black;
float: right;
}

http://jsfiddle.net/uryJJ/32/

FIRST EDIT

.D {
height: 40px;
width: 40px;
float:left;
background-color: yellow;
position:relative;
left: -10px;
}
.E {
height: 50px;
width: 10px;
position: relative;
left: -10px;
background-color: black;
float: left;
}

http://jsfiddle.net/uryJJ/33/

Answer 5

Sorry, I might be beating this to death but this fixes it:

.E {
height: 50px;
width: 10px;
margin-left: -10px;
background-color: black;
float: left;
}

http://jsfiddle.net/uryJJ/35/

I was not a fan of negative margin values until just now.