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

例如，请看我的小提琴，它适用于我的firefox和chrome

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

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

Answer 2

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

Answer 3

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

只需更改“body tag”的宽度

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>

CSS浮动权利不适用于Firefox并且图像已调整大小

4 个答案: