CSS float right 不适用于 Firefox 和调整图像大小

Question

我有以下 html 代码，它在左侧显示 1 个图像，然后在中间显示一个文本框，在右侧显示一个图像。这两个图像具有相同的大小并调整大小以占据屏幕的整个高度。

这在 IE、Chrome 上运行良好，但在 FireFox 15、...、27 上，图像并不完全在右侧，有一个重要的边距。
图像为 760x1660，屏幕高度小于 1660，然后调整大小。
图像看起来好像图像具有与原始图像相对应的边距（760px）减去调整后的宽度......

有什么想法可以使用 css 为 FireFox 解决这个问题吗？

<style type="text/css">
    body {
        width: 100%;
    }
    .left {
        float: left;
        height: 100%;
        padding-right: 5px;
    }
    .right {
        float: right;
        height: 100%;
        padding-left: 5px;
    }
    .content {
    }


</style>


<img class="left" src="./left.jpg" />
<img class="right" src="./right.jpg" />

<div class="content">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</div>

你可以在这张图片上看到不需要的空间http://postimg.org/image/80y7aar41/ 它在 JSFiddle 上运行良好，但是当您将代码放在页面 http://www.filedropper.com/t4_1 中然后调整浏览器大小时，您会看到空旷的空间

Answer 1

以我的 fiddle 为例，它适用于我的 firefox 和 chrome

http://fiddle.jshell.net/S6qXk/4/

不要为课程设置 100% 这就是你的问题。

Answer 2

在 .right 和 .left 类中尝试 margin: 0 和 padding: 0。

Answer 3

问题的答案就在你面前；）

只需更改“body 标签”的宽度

body {
    width: 100%; /*change it to 99% - and everything seems to run just fine in all my browsers, IE, Firefox, opera, chrome*/
}

Answer 4

css 身体 {

    width: 99%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.left {
    float: left;
    height: 100%;
}
.right {
    position:relative;
    float: right;
    height: 100%;
}
#left_image {
    float: left;
    height: 100%;
    width:15%;
}
#right_image {
    position:relative;
    float: right;
    height: 100%;
    width:15%;
}
#center_div {   
    float: left;
    height: 100%;
    text-align:left;
    width:68%;
    padding:15;
}

html:

 <div id="left_image"><img class="left" src="http://www.hellopro.fr/images/produit-2/0/2/0/pompe-a-entrainement-magnetique-verticale-non-metallique-334020.jpg" /></div>
 <div id="right_image"><img class="right" src="http://www.hellopro.fr/images/produit-2/0/2/0/pompe-a-entrainement-magnetique-verticale-non-metallique-334020.jpg" /></div>

 <div id="center_div">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
    </div>