Importing font causes incorrect layout
Question
First of all, this is my first post here ever, so my apologies if I did anything wrong.
To my problem: A section has a width: 100% and overflow-x: scroll .
If I import the font 'Open Sans' from google the section suddenly get's an increased width of more than 100% and no content will thus overflow it. The problem seems to be solved by either removing the import or giving main display: block instead of display: table .
https://jsfiddle.net/ehvpehb6/
Once again, in the fiddle you can't scroll in the section itself. But if you either remove the external resource or change the display property for main, you can.
This brings us to my question: What causes this? Why is it that display: table and the import clash with one another?
EDIT: The issue with the font only appears to be in Chrome, when I tried it in Firefox the import did not cause any problems.
As @colonelclick suggested importing the font in the CSS will fix the problem.. but not when I create a document on my computer and testing it that way. If I import the font in the <head> it casues the issue aswell.
My html ended up looking like this
<!DOCTYPE html> <html> <head> <title>Goot pruject</title> <!-- Either this... --> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <style> /* ...Or this. Both with the same result. @import url(https://fonts.googleapis.com/css?family=Open+Sans); */ main { width: 100%; display: table; font-family: 'Open Sans', sans-serif; } section { width: 100%; height: 230px; overflow-y: hidden; overflow-x: scroll; white-space: nowrap; } main figure { display: inline-block; width: auto; margin-right: 30px; height: inherit; border: 1px solid #b2b2b2; } main figure img { width: inherit; height: inherit; } </style> </head> <body> <main> <section> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> <figure> <img src="http://placehold.it/155x230" /> </figure> </section> </main> </body> </html>
The burning question is WHY an import of a font would change the way the layout works.
1 answers
solution1
0 2016-04-30 01:22:10
Your fiddle is setup incorrectly.
You have added this as an external resource but this is not a link to an external file, this is HTML code.
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
There are several ways you could fix this. They all require removing the existing external resource, which is not a correct external resource string. I tested all four of these solutions, and the problem goes away in Chrome after you fix the error in your fiddle.
- Place the link code in the HTML of your fiddle.
https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
- Use just the font URL as an external resource.
- Use the import command from google fonts in the css of your fiddle.
@import url( https://fonts.googleapis.com/css?family=Open+Sans );
- Use the js font loader from google in the js portion of your fiddle. (Available at https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.