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

Posted 2023-03-04

【中文标题】表格单元格内的 CSS 缩放和 div 对齐

【英文标题】：CSS zoom and div alignment inside a table cell

【发布时间】：2014-08-29 09:28:45

【问题描述】：

我有以下内容：

这是一个表格，有一行和三个单元格，两个蓝色单元格和中间的单元格，在中间的单元格中我有一个 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;

【问题讨论】：

你把zoom放错了。您的缩放规则必须在容器中。

为什么缩放必须在容器中？该问题将缩放放在 div 上而不是放在桌子上，如果缩放在 .container 或 .content 中，结果不一样

是的，@Monty82 是对的，我需要缩放 div，而不是容器

【参考方案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 上显示“相似”结果。

【参考方案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>

【参考方案3】：

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

.container 
    zoom: 0.8

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

【讨论】：

好吧..事实上，这只是将整个块缩小到其原始大小的 80%，而不影响问题......所以我不认为这是一个解决方案..