3

I'm currently working on a site that uses Twitter's Bootstrap 3. The site renders OK on Firefox, but on Chrome/Opera/Safri (basically browsers with WebKit or Blink as a layout engine) there's some weird padding or spaces, and CSS pseudoelements such as ":before" and ":after" are distributed all through the document. Also, there's the "style" attribute added on the body.

As an example on WebKit / Blink: https://i.stack.imgur.com/6jdMe.png

And on Gecko: https://i.stack.imgur.com/U7weW.png

I've dealt with WebKit handling wrong UTF8 with BOM in the past, but this is not the case as all files are encoded in UTF8 without BOM.

Any idea of what's going on here?

Thanks in advance!

NicolasJEngler
  • 565
  • 1
  • 10
  • 27

1 Answers1

0

The visibilty of psuedo elements (such as :before and :after) elements are new in the latest version of Chrome to make debugging easier. Those psuedo elements are there in Firefox, too, they just don't show up in the DOM inspector.

The psuedo elements are likely a clearfix hack which Bootstrap adds to the .row class (see the mixin.less file for .clearfix and .make-row mixins).

As for the style attribute on <body>, it's empty and not affecting anything. I can't find any specific references to why Chrome does this, but Chrome seems to add it on every page in the DOM inspector.

Are the padding/space issues actually visible on the page, or only in the DOM inspector?

shshaw
  • 3,123
  • 2
  • 23
  • 33
  • Yes, there are some visual inconsistencies, for example: Webkit / Blink -> http://i.imgur.com/8CWs8Nt.png Gecko -> http://i.imgur.com/V8xaK1X.png – NicolasJEngler Nov 20 '13 at 00:21
  • 2
    That is likely something with the specific CSS, which I can't debug based on the image alone. I'd suggest posting another question with some styles and a link to the site or a [Codepen](http://codepen.io/pen/) of the isolated html and styles. – shshaw Nov 20 '13 at 00:24
  • I'll take a look at my CSS and see what I can do. Thank you very much! – NicolasJEngler Nov 20 '13 at 00:43