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

ua4mk5z4 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(138)

我有以下内容：

这是一个表格，有一行和三个单元格，两个蓝色单元格，中间的单元格，在中间的单元格我有一个div，现在看起来不错。
但是如果我把zoom属性放在div中（zoom：0.8）我在IE11中得到了一个额外的空间，就好像div仍然是相同的大小，如下所示：

在chrome中，表格只是调整到div大小，但在IE中不是，有什么办法可以做到这一点吗？
这是一个例子：
http://jsfiddle.net/Z3wbN/3/
超文本：

<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;
}

css

来源：https://stackoverflow.com/questions/24635317/css-zoom-and-div-alignment-inside-a-table-cell

3条答案

按热度按时间

oknwwptz1#

一个可能的解决方案，虽然我不知道你是否会喜欢它，可能是这样一个：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上显示“相似”的结果。

赞(0）回复(0）举报 2023-01-10

lvmkulzt2#

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

赞(0）回复(0）举报 2023-01-10

gpnt7bae3#

所有你需要做的是应用缩放到.container太：