2015-02-23 54 views
0

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

什麼版本的Firefox?你有沒有在你使用的版本上檢查'border-box'支持? – atmd 2015-02-23 14:47:00

+0

對不起。我正在使用所有瀏覽器的最新版本。我在上面的帖子中添加了版本號。 Chrome 40.0.2214.115,Firefox 35.0.1,IE 10和11. – ColinCronin 2015-02-23 14:54:28

+0

在[my end](http://jsfiddle.net/tive/c2m5ha2g/)上似乎沒有問題。測試過FF v35 en Chrome v40 – 2015-02-23 15:09:20

回答

0

,因爲你使用的是clearfix只需添加上你的4噸.clearfix類^ h DIV .one_third

這樣的:

<div class="one_full"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-skyline-night-panoramic.jpg"> 
     <img alt="Panoramic Chicago Skyline at Night" src="images/photography/chicago-skyline-night-panoramic.jpg"> 
    </a> 
    </div> 

    <div class="one_half"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/1959-jaguar-xk150.jpg"> 
     <img alt="1959 Jaguar XK-150" src="images/photography/1959-jaguar-xk150.jpg"> 
    </a> 
    </div> 
    <div class="one_half"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/seattle-skyline.jpg"> 
     <img alt="Seattle Skyline" src="images/photography/seattle-skyline.jpg"> 
    </a> 
    </div> 

    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/taroko-gorge.jpg"> 
     <img alt="Taroko Gorge" src="images/photography/taroko-gorge.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/giverny-lily-pond.jpg"> 
     <img alt="Giverny Lily Pond" src="images/photography/giverny-lily-pond.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/giza-pyramid.jpg"> 
     <img alt="Giza Pyramid" src="images/photography/giza-pyramid.jpg"> 
    </a> 
    </div> 

    <div class="one_third clearfix"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/milwaukee-art-museum.jpg"> 
     <img alt="Milwaukee Art Museum" src="images/photography/milwaukee-art-museum.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-navy-pier-fireworks-01.jpg"> 
     <img alt="Navy Pier 4th of July Fireworks 01" src="images/photography/chicago-navy-pier-fireworks-01.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/dessert-is-served.jpg"> 
     <img alt="Dessert is Served!" src="images/photography/dessert-is-served.jpg"> 
    </a> 
    </div> 

    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/seeing-blind.jpg"> 
     <img alt="Seeing Blind" src="images/photography/seeing-blind.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/ghosts-in-mirror.jpg"> 
     <img alt="Ghosts in the Mirror" src="images/photography/ghosts-in-mirror.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-on-the-streets.jpg"> 
     <img alt="On the Streets of Chicago" src="images/photography/chicago-on-the-streets.jpg"> 
    </a> 
    </div> 

    <div class="one_fifth"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-bucktown-mansion.jpg"> 
     <img alt="Mansion in Bucktown, Chicago" src="images/photography/chicago-bucktown-mansion.jpg"> 
    </a> 
    </div> 
    <div class="one_fifth"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/candid-thoughts.jpg"> 
     <img alt="Candid Thoughts" src="images/photography/candid-thoughts.jpg"> 
    </a> 
    </div> 
    <div class="one_fifth"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-navy-pier-fireworks-02.jpg"> 
     <img alt="Navy Pier 4th of July Fireworks 02" src="images/photography/chicago-navy-pier-fireworks-02.jpg"> 
    </a> 
    </div> 
    <div class="one_fifth"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/philosopher-sculpture.jpg"> 
     <img alt="Sculpture of Philosopher's Head" src="images/photography/philosopher-sculpture.jpg"> 
    </a> 
    </div> 
    <div class="one_fifth"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/hot-chocolate.jpg"> 
     <img alt="Hot Chocolate from Hot Chocolate!" src="images/photography/hot-chocolate.jpg"> 
    </a> 
    </div> 

    <div class="one_half"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/fiery-crown-botanical-gardens.jpg"> 
     <img alt="A Fiery Botanical Crown" src="images/photography/fiery-crown-botanical-gardens.jpg"> 
    </a> 
    </div> 
    <div class="one_half"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/uncommon-ground-classical-revolution.jpg"> 
     <img alt="Classical Revolution Performance @ Uncommon Ground" src="images/photography/uncommon-ground-classical-revolution.jpg"> 
    </a> 
    </div> 

    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-gold-coast-farmers-market.jpg"> 
     <img alt="Crepes at the Gold Coast Farmer's Market" src="images/photography/chicago-gold-coast-farmers-market.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-bucktown-motorcycle-rider.jpg"> 
     <img alt="Bucktown Motorcycle Rider" src="images/photography/chicago-bucktown-motorcycle-rider.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-gold-coast-fence.jpg"> 
     <img alt="Gold Coast Fence" src="images/photography/chicago-gold-coast-fence.jpg"> 
    </a> 
    </div> 

    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chiang-kai-shek-memorial.jpg"> 
     <img alt="Chiang Kai Shek Memorial" src="images/photography/chiang-kai-shek-memorial.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/couple-on-puget-sound.jpg"> 
     <img alt="A Couple on Puget Sound" src="images/photography/couple-on-puget-sound.jpg"> 
    </a> 
    </div> 
    <div class="one_third"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/istanbul-blue-mosque.jpg"> 
     <img alt="Blue Mosque Istanbul" src="images/photography/istanbul-blue-mosque.jpg"> 
    </a> 
    </div> 

    <div class="one_half"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/andrews-park-soccer-game.jpg"> 
     <img alt="Soccer Game @ Andrews Park" src="images/photography/andrews-park-soccer-game.jpg"> 
    </a> 
    </div> 
    <div class="one_half"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/chicago-skyline-lincoln-park.jpg"> 
     <img alt="Chicago Skyline from Lincoln Park" src="images/photography/chicago-skyline-lincoln-park.jpg"> 
    </a> 
    </div> 

    <div class="one_full"> 
    <a rel="prettyPhoto[gallery]" href="images/photography/whiskey-collection-2015-01.jpg"> 
     <img alt="My Humble Little Whiskey Collection" src="images/photography/whiskey-collection-2015-01.jpg"> 
    </a> 
    </div> 
+0

謝謝。這確實有效。你有什麼想法,爲什麼問題發生雖然(並且只在某些瀏覽器上)?整個頁面由圓柱組成,這是唯一發生的地方。我甚至在頁面上有多個3列的行,如果我將這些行移動到問題行的位置,我會得到相同的問題(即使相同的代碼在頁面中顯示的更低)。 – ColinCronin 2015-02-23 15:14:10

0

你應該穿上display: block您的圖像達到正確的填充。 如果不是,所有錨點和圖像的行爲就像內聯元素,其尺寸(寬*高)將在頁面呈現時計算。由於您使用box-sizing: border-box此填充只是成爲一個問題。

通過將它們設置在「塊」上,高度將相應地計算出來,並且錨將很好地環繞它們。

這種高度問題對於這種網格系統是很典型的。 如果您的填充不一致(=> JavaScript「等高」功能),您還會注意到高度問題。 目前情況並非如此,因爲右側的列也有填充。

至於你最初的問題,嘗試玩你的工具欄中的像素填充(F12),看看會發生什麼,如果他們正常調整。

如果您的基礎字體大小沒有正確設置,您的REM值不是基於font-size: 10px再次導致不一致。

My Fiddle

+0

謝謝蒂姆。我會更仔細地研究這一點。然而,對我而言,我以前曾嘗試在img類上使用display:block,但它並未爲我解決問題,也未改變列CSS上的填充。這似乎很奇怪,這個問題可能發生在頁面某一部分的完全相同的代碼中,在其他地方顯得很好。我很感謝你的見解。 – ColinCronin 2015-02-23 15:40:30

+0

Ok Colin,FYI我已經使用過類似的網格設置,沒有任何問題。 如果你想看看它的連接[點] .be。 'font-size:10px'在我的'html'節點上。每個「列」上都有[clearfix](http://nicolas.google.com/micro-clearfix-hack/)。 GL! – 2015-02-23 15:45:43