1

在过去的几天里，我一直在为这张表苦苦挣扎，最终得到了我想要的结果，只是发现文本对齐在 chrome 中无法正常工作。它在 ie 和 firefox 中准确地显示了我想要的方式（垂直对齐到中间并填充左侧）但是它并没有在 chrome 中出现。任何帮助都会很棒，我已经筋疲力尽了。

在 jfiddle ( http://jsfiddle.net/kaRev/ )中打开这两个。下一张图片说明了我在两个浏览器（chrome 和 ff）之间遇到的问题。右侧的 Firefox 正确填充它，而左侧的 chrome 则没有

在此处输入图像描述

这是 chrome 的屏幕截图，其中表格中的文本太左了。

在此处输入图像描述

这是 Firefox，这就是我想要的：

在此处输入图像描述

HTML：

<table class="tableBenefits">
<thead>
<tr>
          <th style="height:34px;width: 207px;font-weight:bold;color:#D2161C;" class="headneed">
      &nbsp Your Need        </th>
          <th style="height:34px;width: 166px;font-weight:bold;color:#D2161C;" class="headfeature">
      Feature        </th>
          <th style="height:34px;width: 260px;font-weight:bold;color:#D2161C;" class="headbenefits">
      Benefits   </th>

      </tr>
</thead>

<tbody >
      <tr class="row-mid">
              <td class="need">
        Notify technicians &amp; managers of work order status updates          </td>
              <td class="feature">
        Automated work order email notifications          </td>
              <td class="benefits">
        Keeps team updated on work order status; reduces admin time on work orders          </td>



          </tr>

  <tr class="row-mid">
              <td class="need">
        Notify service/repair requesters of progress          </td>
              <td class="feature">
        Automated service request email notifications          </td>
              <td class="benefits">
        Keeps requesters updated on progress; reduces personnel time for providing updates          </td>
          </tr>

  <tr class="row-mid">
              <td class="need">
        Manage &amp; track work orders          </td>
              <td class="feature">
        Work Order Forms, Linking, &amp; Routing          </td>
              <td class="benefits">
        Simplifies work order administration &amp; reduces data entry time          </td>
          </tr>

  <tr class="row-mid">
              <td class="need">
        Manage service &amp; repair requests          </td>
              <td class="feature">
        Web-based Service Request Form          </td>
              <td class="benefits">
        Simplifies request submission and routing          </td>
          </tr>
  </tbody>

CSS：

.tableBenefits thead {
background: url(http://www.mpulsesoftware.com/sites/all/themes/zen/image/top_eq.jpg) no-repeat;
}

.tableBenefits {
border-collapse: collapse;
border-spacing: 0;
}

.tableBeneits thead th {
font-weight:bold;color:#D2161C;
}

.tableBenefits {height:300px;width:640px;}

.headneed{font-weight:bold;font-size:11px;}
.headfeature{font-size:11px;}
.headbenefits{font-size:11px;}
.need{font-weight:bold;font-size:11px;text-align: left;padding-left: 10px;}
.feature{font-size:11px;text-align: left;padding-left: 10px;}
.benefits{font-size:11px;text-align: left;padding-left: 10px;}
.row-mid{background: url("http://www.mpulsesoftware.com/sites/all/themes/zen/image/middle_eq.jpg")repeat-y;width:640px;border-bottom:1px solid #ccc;}

.row-last{background: url("http://www.mpulsesoftware.com/sites/all/themes/zen/image/bottom_eq.jpg")repeat-y;width:640px;}



/* Webtk hack*/

@media screen and (-webkit-min-device-pixel-ratio:0) {




.tableBenefits td, .tableBenefits th {
  display: inline-table;

}

.headneed, .need{
  width: 207px;


}
.headfeature, .feature{
  width: 166px;

 }

.headbenefits, .benefits{
  width: 260px;

 }

}

/* End benefits table */
4

1 回答 1

0

摆脱这个display: inline-table;

于 2012-10-11T20:46:36.537 回答