Question

在我的页面上，我需要渲染一组合理的容器。设计一个网格以容纳6个元素，并且如果元素少于6个，则保持元素到位，这里有鬼元素。

- items.in_groups_of(6, :ghost) do |group|
  .catalog-line
    - group.each do |item|
      - if item == :ghost
        .catalog-item.ghost
      - elsif item == highlighted_item
        .catalog-item
          .img-outline.highlighted
            .shadow-circle
              %img.circle{src: item.picture.small.url, alt: item.name}
          %p= item.name
      - else
        %a.catalog-item{href: show_catalog_item_path(item)}
          .img-outline
            .shadow-circle
              %img.circle{src: item.picture.small.url, alt: item.name}
          %p= item.name

在Firefox和Chrome中一切正常，但是出于某些原因，Opera在对它们进行校对时不想介意这些空容器，所以如果有3个，那么它们之间的距离太远，占据了所有宽度。目录行并忽略鬼魂。

是什么让我刮挠我的头脑是实际存在于DOM结构中的鬼div，宽度设置等于真正的容器但是Opera将它们视为不存在而且Dragonfly检查工具不显示它们的位置或边界，只有css属性

.catalog-line的CSS属性

font-size: 0px;
line-height: 0px;
text-align: justify;
display: block;

.catalog-item的CSS属性

display: inline-block;
vertical-align: top;
width: 144px;
color: #333333;
zoom: 1;
font-size: 0px;
line-height: 0px;

我真的不想重新考虑我的鬼块系统，我希望我能让Opera以某种方式识别它们。

编辑：Html

<div class="catalog-line">
  <a class="catalog-item" href="/asm-elit/divany">
    <div class="img-outline">
      <div class="shadow-circle">
        <img alt="Диваны" class="circle" src="/system/category_pictures/5290f7371d41c8351a00000f/small_divans.png">
      </div>
    </div>
    <p>Диваны</p>
  </a>
  <a class="catalog-item" href="/asm-elit/krovati">
    <div class="img-outline">
      <div class="shadow-circle">
        <img alt="Кровати" class="circle" src="/system/category_pictures/5290f7381d41c8351a000010/small_beds.png">
      </div>
    </div>
    <p>Кровати</p>
  </a>
  <a class="catalog-item" href="/asm-elit/kresla">
    <div class="img-outline">
      <div class="shadow-circle">
        <img alt="Кресла" class="circle" src="/system/category_pictures/5290f7381d41c8351a000011/small_armchairs.png">
      </div>
    </div>
    <p>Кресла</p>
  </a>
  <div class="catalog-item ghost" style="height:10px;"></div>
  <div class="catalog-item ghost" style="height:10px;"></div>
  <div class="catalog-item ghost" style="height:10px;"></div>
</div>

.img-outline的CSS

background-color: white;
border-bottom-color: gray;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-left-color: gray;
border-left-style: dashed;
border-left-width: 1px;
border-right-color: gray;
border-right-style: dashed;
border-right-width: 1px;
border-top-color: gray;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-top-style: dashed;
border-top-width: 1px;
padding-bottom: 6px;
padding-left: 6px;
padding-right: 6px;
padding-top: 6px;
width: 130px;
display: block;

.shadow-circle的CSS

display: inline-block;
position: relative;
width: auto;
height: auto;

p的CSS：

margin: 10px 0 0 0;
padding: 5px 0;
font-size: 14px;
line-height: 20px;
font-style: italic;
font-weight: bold;

其他元素只有继承属性。

更新：.ghost似乎有问题。即使在那里放置实际图片，保留正常块的元素结构也不起作用。似乎是我不知道的东西我在CSS或其他地方找不到任何重要的区别。

另一个更新：在将.ghost设置为与常规元素完全相同并使自己成为链接之后，我发现它们开始出现 - 从屏幕出来并从父容器中出来，好像那个paren是两倍宽。为什么，歌剧？

Opera隐藏了空容器

0 个答案: