组件仅在 Safari 中损坏答案

【问题标题】：Component is broken only in Safari组件仅在 Safari 中损坏
【发布时间】：2025-11-21 23:35:01
【问题描述】：

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

在所有其他主流浏览器（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 和其他浏览器上的样子。

这就是它在 Safari 上的损坏情况

【问题讨论】：

标签： html css google-chrome safari

【解决方案1】：

通过添加

vertical-align: middle;

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

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

【讨论】：

【解决方案2】：

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

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

或者这可能有帮助？

Relative positioning in Safari

【讨论】：