表格单元格内的 CSS 缩放和 div 对齐

Question

我有以下内容：

这是一个表格，有一行和三个单元格，两个蓝色单元格和中间的单元格，在中间的单元格中我有一个 div，现在看起来不错。

但是如果我将 zoom 属性放在 div 中（缩放：0.8），我会在 IE11 中得到一个额外的空间，就好像 div 仍然是相同的大小，像这样：

在 chrome 中，表格只是调整到 div 大小，但在 IE 中没有，有没有我可以做到这一点？

这是示例的关键：

http://jsfiddle.net/Z3wbN/3/

HTML：

<table class="container">
<tr>
    <td class="border">
    </td>
    <td>
        <div class="content">
            This is a test
        </div>
    </td>
    <td class="border">
    </td>
</tr>

CSS：

.container {
    background-color: #ddd;
}

.border {
    background-color: blue;
    width:10px;
}

.content {
    margin: auto;
    width: 500px;
    border: 2px solid yellow;
    zoom: 0.8;
}

Answer 1

一种可能的解决方案，虽然我不知道你是否喜欢它，但可能是这个：http://jsfiddle.net/Z3wbN/14/

关于那个解决方案：

• 标签中添加了几个类/ID；
• 宽度分配给中间单元格，而不是分配给该单元格内的 div；
• 如果是IE浏览器，则将div宽度调整为125%（100% / 0.8即缩放）。

检测浏览器的方式是JavaScript，但你可以尝试任何你想要的（我从Detect IE version (prior to v9) in JavaScript得到它）：

// if it's an IE browser then update the class to "container ie"
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
   document.getElementById("container").className = "container ie";
}

然后按照上面列表中的说明调整 CSS：

td.middle {
    width:500px;
}

.content {
    margin: auto;
    border: 2px solid yellow;
    zoom: 0.8;
}

.ie .content {
    width:125%;
}

此解决方案在 IE 和 Chrome/Firefox 上显示“相似”结果。

Answer 2

你需要使用display:table-cell;来类.content

这是更新后的小提琴：

.container {
  background-color: #ddd;
}

.border {
  background-color: blue;
  width: 10px;
}

.content {
  margin: auto;
  width: 500px;
  border: 2px solid yellow;
  zoom: 0.8;
  display: table-cell;
}

zoom: 0.5;

<table class="container">
  <tr>
    <td class="border">
    </td>
    <td align="center">
      <div class="content">
        This is a test
      </div>
    </td>
    <td class="border">
    </td>
  </tr>
</table>

Answer 3

您需要做的就是对 .container 应用缩放：

.container {
    zoom: 0.8
}

这是 JSFiddle：http://jsfiddle.net/Z3wbN/12/