這是我的第一個問題。我感謝任何和所有的幫助。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