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變焦和表格單元格內格對齊

回答

相關問題