2015-02-23 52 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