Body Margin:0, Div Width:100% problem in FF and Chrome, fine in IE_问答_开发者

Body Margin:0, Div Width:100% problem in FF and Chrome, fine in IE

开发者 https://www.devze.com 2022-12-25 01:02 出处：网络

I\'m starting to pull my hair out of my head... I have the following: <html> <head> <styl开发者_如何学JAVAe>

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>