表格单元格内的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

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

.container {
    zoom: 0.8
}

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

Answer 2

一种可能的解决方案，虽然我不知道你是否喜欢它，但可能是这样的：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 3

您需要使用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>