Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

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: http://i.stack.imgur.com/6jdMe.png

And on Gecko: http://i.imgur.com/wyK7VC5.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!

share|improve this question
 
What is it with Bootstrap these days? I've had nothing but problems with sites using bootstrap. –  Tommy 23 hours ago
 
I actually prefer Zurb's Foundation, but this client insisted on using Bootstrap. –  NicolasJEngler 23 hours ago

1 Answer

up vote 0 down vote accepted

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?

share|improve this answer
 
Yes, there are some visual inconsistencies, for example: Webkit / Blink -> i.imgur.com/8CWs8Nt.png Gecko -> i.imgur.com/V8xaK1X.png –  NicolasJEngler 23 hours ago
1  
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 of the isolated html and styles. –  shshaw 23 hours ago
 
I'll take a look at my CSS and see what I can do. Thank you very much! –  NicolasJEngler 22 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.