这是我的第一个问题。我感谢任何和所有的帮助。Firefox/IE但不支持Chrome的列布局问题
我最近重新设计了我的个人网站colincronin.com。在“摄影”部分(第三个导航项)上,我使用列布局显示一个画廊。在谷歌浏览器中一切都很好。但是,在Firefox/IE中,第四行被强制结束,因此只有两个图像出现在这一行,第三个图像出现在下一行。这创建空白空白,看起来像照片丢失。
我已经包含了我正在使用的CSS和HTML。我想包括截图,但我不能在图像的身体直接添加又那么这里的网址截图:
http://i.stack.imgur.com/PfdZl.jpg器(Chrome 40.0.2214.115)
http://i.stack.imgur.com/WenDq.jpg(火狐35.0.1/IE 10和11)
这些图片来自PC,尽管在Mac上Chrome和Firefox以相同的方式渲染页面。先谢谢你。
最佳,
科林
CSS:
.one-full,
.one_half,
.one_third,
.two_third,
.one_quarter,
.one_fifth,
.three_quarter,
.two_fifth,
.three_fifth,
.four_fifth
{
margin: 0;
padding: 0 .3em .1em 0em;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.one_full
{
width: 100%;
margin: 0;
float: left;
}
.one_half
{
width: 50%;
}
.one_third
{
width: 33.33333%;
}
.two_third
{
width: 66.66666%;
}
.one_quarter
{
width: 25%;
}
.one_fifth
{
width: 20%;
}
.three_quarter
{
width: 75%;
}
.two_fifth
{
width: 40%;
}
.three_fifth
{
width: 60%;
}
.four_fifth
{
width: 80%;
}
.one_full img,
.one_half img,
.one_third img,
.two_third img,
.one_quarter img,
.one_fifth img,
.three_quarter img,
.two_fifth img,
.three_fifth img,
.four_fifth img
{
width: 100%;
height: auto;
}
HTML:
<div class="one_third">
<a href="images/photography/taroko-gorge.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/taroko-gorge.jpg" alt="Taroko Gorge"></a>
</div>
<div class="one_third">
<a href="images/photography/giverny-lily-pond.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/giverny-lily-pond.jpg" alt="Giverny Lily Pond"></a>
</div>
<div class="one_third">
<a href="images/photography/giza-pyramid.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/giza-pyramid.jpg" alt="Giza Pyramid"></a>
</div>
<div class="one_third">
<a href="images/photography/milwaukee-art-museum.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/milwaukee-art-museum.jpg" alt="Milwaukee Art Museum"></a>
</div>
<div class="one_third">
<a href="images/photography/chicago-navy-pier-fireworks-01.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/chicago-navy-pier-fireworks-01.jpg" alt="Navy Pier 4th of July Fireworks 01"></a>
</div>
<div class="one_third">
<a href="images/photography/dessert-is-served.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/dessert-is-served.jpg" alt="Dessert is Served!"></a>
</div>
<div class="one_third">
<a href="images/photography/seeing-blind.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/seeing-blind.jpg" alt="Seeing Blind"></a>
</div>
<div class="one_third">
<a href="images/photography/ghosts-in-mirror.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/ghosts-in-mirror.jpg" alt="Ghosts in the Mirror"></a>
</div>
<div class="one_third">
<a href="images/photography/chicago-on-the-streets.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/chicago-on-the-streets.jpg" alt="On the Streets of Chicago"></a>
</div>
什么版本的Firefox?你有没有在你使用的版本上检查'border-box'支持? – atmd 2015-02-23 14:47:00
对不起。我正在使用所有浏览器的最新版本。我在上面的帖子中添加了版本号。 Chrome 40.0.2214.115,Firefox 35.0.1,IE 10和11. – ColinCronin 2015-02-23 14:54:28
在[my end](http://jsfiddle.net/tive/c2m5ha2g/)上似乎没有问题。测试过FF v35 en Chrome v40 – 2015-02-23 15:09:20