Firefox / IE中的列布局问题，但不是Chrome

Question

这是我的第一个问题。我感谢任何帮助。

我最近重新设计了我的个人网站colincronin.com。在“摄影”部分（第三个导航项）我使用列布局来显示一个库。在Google Chrome中，一切看起来都不错。但是，在Firefox / IE中，第四行被强制执行，因此此行中只显示两个图像，第三行显示在下一行中。这会创建空白区域，看起来像是缺少照片。

我已经包含了我正在使用的CSS和HTML。我想要包含屏幕截图，但我无法将它们直接添加到图像的正文中，所以这里是屏幕截图的网址：

http://i.stack.imgur.com/PfdZl.jpg（Chrome 40.0.2214.115）
http://i.stack.imgur.com/WenDq.jpg（Firefox 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>

Answer 1

因为您使用的是clearfix，只需在第四个.clearfix上添加课程.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>

Answer 2

您应该将图像放在display: block上以获得正确的填充。 如果不是，则所有锚点和图像的行为类似于内联元素，其将在页面呈现时计算尺寸（宽度*高度）。由于你使用box-sizing: border-box这个填充只是一个问题。

通过在＆＃34; block＆＃34;上设置它们，将相应地计算高度，并且锚点将很好地环绕它们。

此高度问题是此类网格系统的典型问题。 如果您的填充不一致（=＆gt; JavaScript＆＃34;相等的高度＆＃34;功能），您还会注意到高度问题。 目前情况并非如此，因为右边的列也有填充。

关于您的初始问题，请尝试使用工具栏内的填充（F12）来查看会发生什么以及它们是否正常调整。

如果您的基本字体大小未正确设置，则您的rem值不会基于导致不一致的font-size: 10px。

<强> My Fiddle