Element is not wrapping properly, shows on resize viewport and scrolled to the right
After playing around with the most basic HTML setup I discovered that the wrapping of the top <html> tag does not function properly, in EVERY browser.
I've got the <html> element wi开发者_如何学运维th a background color yellow.
Then the <body> element with a width of 1000px, height of 100px, and a background color red.
When viewing the page and resizing the viewport (so the horizontal scrollbar becomes visible), scroll completely to the right and check out the metrics in your favorite web developer tool.
The body tag is properly displayed with a width of 1000px, but then hover over the HTML element which will be cutoff at exactly the size of the viewport resolution. In other words the <html> element does not wrap properly. Even though the background color of the <html> tag is rendered properly over the entire page?
You might think. Why is this important, the color is displayed properly so. Why bother?
The problem becomes clear on this very site also! Scroll down to bottom of this page, resize your browser window and then scroll to the right. Watch what happens to the footer background img.
When working with background images/color, this is really annoying.
I have found a solution on the web to fix this problem, but its not elegant.
/* Wrap Fix! */
/*set min-width for ie*/
min-width: 1000px;
/*force horizontal scroll for widths <1000*/
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
My questions are:
Is this proper behavior of the browsers? How can this be solved differently?
For more information, discussion and demo's check this forum
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Weird html wrap..</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
}
body {
background-color: red;
height: 100px;
width: 1000px;
}
</style>
</head>
<body>
</body>
</html>The same can be said for any block element, which the HTML element is. If any of its children are wider than it then they 'leak' outside of it (see: http://jsbin.com/edoza5). You're assuming that the HTML is special when it is simply just another block element.
It's true that there are inconsistencies between how browsers handle setting a width on the body element, which is one of the reasons why a containing wrapper is common place. That, and it's useful having two 100% 'root' elements to play with.
加载中,请稍侯......
精彩评论