CSS变焦和表格单元格内格对齐

我有以下内容：CSS变焦和表格单元格内格对齐

enter image description here

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

但如果我把zoom属性在div（变焦：0.8）我在IE11获得一个额外的空间，因为如果格仍然是相同的大小，类似这样的：

enter image description here

在铬，表只是调整到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; 
}

来源

2014-07-08 Escobar5

你放置'zoom'错了。您的缩放规则必须位于容器中。 –

为什么缩放必须放在容器中？这个问题放在div的缩放，而不是在桌子上，如果缩放在.container或.content –

的结果是不一样的，@蒙蒂82是正确的，我需要放大的div，而不是容器 – Escobar5

所有你需要的牛逼·你是申请变焦.container太：

.container { 
    zoom: 0.8 
}

这里的的jsfiddle：http://jsfiddle.net/Z3wbN/12/

来源

2014-07-08 15:12:12

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

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

来源

2014-07-08 16:23:56

CSS变焦和表格单元格内格对齐

回答

相关问题