Body Margin:0, Div Width:100% problem in FF and Chrome, fine in IE
I'm starting to pull my hair out of my head...
I have the following:
<html>
<head>
<styl开发者_如何学JAVAe>
body { margin:0 auto; }
</style>
</head>
<body>
<div style="border: solid 1px red; width: 100%;">test</div>
</body>
</html>
This works in IE producing a nice div, 100% width, no H scrollbar...
Now in Chrome and FF, it is 1px wider than the window, causing an H scrollbar...
Why is that? What SHOULD I be using instead?
Thanks a lot! Albert
EDIT:
I added div { margin: 0; } to the head and removed the width: 100% and it worked, thanks.
The border is sitting outside of the width, so you get 100% + 2px. Just drop the width property – a div is per default 100% wide.
As scavenger already pointed out. The margin of the div ist the problem. Reset everything with this command:
<style>
* { margin:0; }
</style>
For more information I recommend you to read this article by Eric Meyer about reseting the CSS in all browsers to the same default values.
You forgot to disable the div's margin.
replace the width:100% by margin:0px
I still had issues with this, in the end, I added a style="zoom: 1;" to the divs
<div style="zoom: 1;">
<div style="zoom: 1;">
<table style="width: 100%"...
...
</table>
</div>
</div>
DIV with overflow:auto and a 100% wide table
I tried it and this way works fine:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { margin:0 auto; }
</style>
</head>
<body>
<div style="border: solid 1px red; width: 100%;">test</div>
</body>
</html>
加载中,请稍侯......
精彩评论