Question

我有一个非常简单的页面，其中包含许多div左移和彼此顶部的div。

就像一张桌子。

在每个div中，都有一个gif或jpeg图像，与div本身的大小完全相同。

在除IE8之外的所有浏览器中（我测试了所有其他浏览器，包括当前版本的Explorer），它的工作正常。

在IE8中，浏览器无处不在发明垂直边距。所以它解构了我整个页面。

以下是整个代码：

<?php
$serveur = $_SERVER['REMOTE_HOST'];
$ip = $_SERVER['REMOTE_ADDR'];
?>
<html>
<head><title>Test Microsite</title>
</head>

<body style="background-color: ffcc99;">

<div id='wrapper' style='width: 1280; margin: 0 auto; box-shadow: 80px 80px 50px #888888;'>
    <!--
    <div style='width: 100%; height: 25; background-color: black;'>
    </div> -->
    <div id="top-1" style='width: 180; height: 40; float:left; background-color: gray; display: block;'>
        <img src="images/Top-1.gif" width="180" height="40" alt="">
    </div>
    <div id="top-2" style='width: 920; height: 40; float:left; background-color: green; display: block;'>
        <img src="images/Top-2.gif" width="920" height="40" alt="">
    </div>
    <div id="top-3" style='width: 180; height: 40; float:left; background-color: blue; display: block;'>
        <img src="images/Top-3.gif" width="180" height="40" alt="">
    </div>
    <div id="gauche-principal" style='width: 180; height: 660; float:left; background-color: gray; display: block; margin: 0; padding: 0;'>
        <img src="images/Gauche-Principal.gif" width="180" height="660" alt="">
    </div>
    <div id="centre-principal" style='width: 660; height: 660; float:left; background-image: url("images/Centre-principal.jpg"); display: block;'>
        <center>Votre adresse IP est: <br><?php echo $ip;?></center><br><br><br>
        <center>Si vous êtes un visiteur de l'agence, l'image ci-jointe sera noire et bleue.<br>Autrement, l'image sera rouge et noire.<br>
        <?php
            if ( $ip == "142.85.5.166" || $ip == "142.85.5.167" || $ip == "142.85.5.168" || $ip == "142.83.68.66" )
            {?>
                <img src="http://sol.heimsnet.is/!Jolamappan/wreath-blue-square.jpg">
            <?php }
            else {?>
                <img src="http://images2.layoutsparks.com/1/108811/adhorrence-red-black-design.gif">
            <?php };
        ?>
    </center>
    </div>
    <div id="barre-boutons" style='width: 260; height: 660; float:left; background-color: violet; display: block;'>
        <img src="images/Barre-boutons-1.gif" width="260" height="260" alt="">
    <img src="images/Barre-boutons-2.gif" width="260" height="20" alt="">
    <img src="images/Barre-boutons-3.gif" width="260" height="80" alt="">
    <img src="images/Barre-boutons-4.gif" width="260" height="8" alt="">
    <img src="images/Barre-boutons-5.gif" width="260" height="80" alt="">
    <img src="images/Barre-boutons-6.gif" width="260" height="8" alt="">
    <img src="images/Barre-boutons-7.gif" width="260" height="80" alt="">
    <img src="images/Barre-boutons-8.gif" width="260" height="8" alt="">
    <img src="images/Barre-boutons-9.gif" width="260" height="80" alt="">
    <img src="images/Barre-boutons-10.gif" width="260" height="36" alt="">

    </div>
    <div id="droite-principal" style='width: 180; height: 660; float:left; background-color: orange; display: block;'>
        <img src="images/Droite-principal.png" width="180" height="660" alt="">
    </div>
    <div id="gauche-barre-bas" style='width: 180; height: 40; float:left; background-color: blue; display: block;'>
        <img src="images/Gauche-barre-bas.gif" width="180" height="40" alt="">
    </div>
    <div id="centre-barre-bas" style='width: 920; height: 40; float:left; background-color: red; display: block;'>
        <img src="images/Centre-barre-bas.gif" width="920" height="40" alt="">
    </div>
    <div id="droite-barre-bas" style='width: 180; height: 40; float:left; background-color: blue; display: block;'>
        <img src="images/Droite-barre-bas.gif" width="180" height="40" alt="">
    </div>
    <div id="gauche-footer" style='width: 180; height: 80; float:left; background-color: gray; display: block;'>
        <img src="images/Gauche-footer.gif" width="180" height="80" alt="">
    </div>
    <div id="centre-footer" style='width: 920; height: 80; float:left; background-color: orange; display: block;'>
        <img src="images/Centre-footer.gif" width="920" height="80" alt="">
    </div>
    <div id="droite-footer" style='width: 180; height: 80; float:left; background-color: pink; display: block;'>
        <img src="images/Droite-footer.jpg" width="180" height="80" alt="">
    </div>
</div>

</body>

</html>

结果如下：

在标准浏览器中（你知道，实际工作的那些......） http://www.martinbeaulne.com/temp/test-microsite/site-exemple-CHROME.jpg

IE8（是的，有些人真的使用它，看起来很奇怪） http://www.martinbeaulne.com/temp/test-microsite/site-exemple-IE8.jpg

（颜色来自每个div的背景。这是我用来看看发生了什么的标记。）

非常感谢你的帮助。

IE8在div中创造边距

0 个答案: