Question

我创建了一个重复内联块元素的组件，图像是标题和一些文本。

在所有其他主流浏览器（Chrome，Firefox，Opera）中看起来都很不错。

宽度和高度存在差异，但是我在CSS中设置它仍然没有解决问题，我使用规范化器将浏览器重置为一个相同的起点。

这是我的标记

     <!-- Surface Header & Close Icon-->
   <div v-if="products.length == 4" class="products four">
     <div class="header">
       <h3>{{{ surface.label }}}</h3>
       <img @click="surface = {}" src="assets/surface_menu_close_icon.png" alt="Close Icon">
     </div>

     <!-- Products Associated with Surface Click-->
     <div v-for="product in products" class="box" @click="selectProduct(product)">
       <div v-show="product.type == 'Deep'" class="deep-clean"></div>
       <div v-show="product.type == 'Quick'" class="quick-clean"></div>
       <img v-bind:src="product.url" alt="{{ product.name }}">
       <h2>{{{product.name}}}</h2>
       <p>Details ></p>
     </div>
   </div>

这里是与该标记相关联的CSS。

.products {
      position: absolute;
      bottom: 5px;
      right: 5px;
      font-size: 0;

      .box {
        cursor: pointer;
        overflow: hidden;
        display: inline-block;
        padding: 15px 10px;
        font-size: 16px;


        .deep-clean {
          height: 12px;
          width: 14px;
          background: url("deep_clean_triangle.png") no-repeat center;
          background-size: contain;
          position: relative;
          left: 130px;
          top: -12px;
        }

        .quick-clean {
          height: 12px;
          width: 14px;
          background: url("quick_clean_triangle.png") no-repeat center;
          background-size: contain;
          position: relative;
          left: 130px;
          top: -12px;
        }

        h2 {
          margin: 0 0 10px 0;
          font-size: .9em;
          font-weight: normal;
        }

        p {
          margin: 0;
          font-size: .75em;
          font-weight: bold;
          color: $surface-blue;
        }

        img {
          float: right;
          width: auto;
          height: 90px;
        }

       &.four {
        height: 323px;
        width: 317px;

        }
      }

以及Chrome浏览器和其他浏览器的外观。 this

这就是它在Safari上看起来像什么

Answer 1

添加

vertical-align: middle;

到框类它修复了我在safari中遇到的所有问题而不影响其他浏览器，css类现在看起来像这样：

.box {
        vertical-align: middle;
        cursor: pointer;
        overflow: hidden;
        display: inline-block;
        padding: 15px 10px;
        font-size: 16px;
}

Answer 2

使用html表格布局会不会更简单？然后根据需要调整样式，而不是给它们所有的确切位置？

http://www.w3schools.com/html/html_tables.asp

或许这有帮助吗？

Relative positioning in Safari

组件仅在Safari中被破坏

2 个答案: