1px Unwanted Space in Internet Explorer

2

On my site, below the footer is a 1px space that only occurs in Internet Explorer.
In my case, I'm using IE-10 . The footer has a fixed positioning, I inserted it outside the container of the site, and put it back by setting a negative lower margin to container .

.MASTER {
    width:1169px;
    margin-left: auto;
    margin-right: auto;
    /*margin-bottom:-228px;*/
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -228px;
}
.MT_SEM_SOMBRAS {
    width:1155px;
    margin-left:auto;
    margin-right:auto;
}
#fixer {
    width:1155px;
    height:228px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FF0;
}
#push {
    margin-left:auto;
    margin-right:auto;
    width:1155px;
    height:228px;
}
<div id="MASTER">
    <div id="MT_SEM_SOMBRAS">
        Conteúdo do site
    </div>
</div>

<div id="fixer"> <!--este na verdade é o rodapé-->
    conteúdo com margem negativa
</div> 
    
asked by anonymous 22.09.2015 / 23:49

2 answers

5

You can use CSS Hack for this example:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   // apenas IE 10
   // aqui tu coloca a classe com a margin negativo pro IE
}
    
22.09.2015 / 23:56
0

Add to CSS

body{
        margin:0 0 0 0;
        padding: 0 0 0 0;
    }

This code is meant to reinforce that we do not want space between the body and the content.

Example.:

<html>
    <head>
        <meta charset="iso-8859-1">
        <title>Documento sem título</title>
        <style>
            body{
                margin:0 0 0 0;
                padding: 0 0 0 0;
            }
            #MASTER {
                width:1169px;
                height: 100%;
            }
            #MT_SEM_SOMBRAS {
                width:1155px;
                margin-left:auto;
                margin-right:auto;
                height:100%;
            }
            #fixer {
                clear:both;
                width:1155px;
                height:228px;
                margin-left:auto;
                margin-right:auto;
                background-color:#FF0;
            }
        </style>
    </head>

    <body>
        <div id="MASTER">
            <div id="MT_SEM_SOMBRAS">
                Conteúdo do site

            </div>

        </div>
        <div id="fixer"> <!--este na verdade é o rodapé-->
                conteúdo com margem negativa
        </div> 

    </body>
</html>
    
06.10.2015 / 19:06