ie8和ie9中的表格單元格內容旋轉錯誤

我正在嘗試創建一個表，它將在第一列單元格中具有rowspan。我想這個文本被旋轉。ie8和ie9中的表格單元格內容旋轉錯誤

我設法讓這個工作在Chrome上，但在IE上我得到了奇怪的結果。
這是導致在Chrome： enter image description here

，這是IE8（IE10正常工作）： enter image description here

這裏是IE9結果： enter image description here

我試着用width和height屬性，但它沒有幫助。

下面是我對那些td元素的CSS和這裏的jsfiddle對其進行測試：http://jsfiddle.net/qYySC/4/

td.rotate div { 
    vertical-align: middle; 
    text-align: center; 
    font-size: 12px; 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

我應該如何改變我的CSS以刪除對齊問題？我的表由服務器生成，因此它可以具有不同的大小（組中的行數）。

我需要得到這個工作在IE8上。

編輯：
當我改變這些細胞旋轉文本的長度就先來了解一下差不多吧。但是，如果我有更長的文字，我可以將它換成2行？並且存在居中問題 - 這些單元格中的文本不居中（IE8）。

來源

2013-05-29 Misiu

由於我沒有IE8我不能測試它，但你真的必須給他們一個寬度，所以框看起來相同，並告訴第一行，它必須居中。 –

@RyandeVries - 我試過了。我添加了文本對齊和垂直對齊該td樣式，我試着將寬度和高度設置爲div或td但沒有任何運氣:(這就是爲什麼我在SO上發佈該問題的原因。 – Misiu

@RyandeVries：您可以按F12鍵IE10或IE9，並選擇瀏覽器模式：IE8 – Jawad

您這裏有兩個問題：

首先，在IE8和更早版本：

IE8使用filter風格使用ActiveX做旋轉。這是一個複雜的野獸，但它的主要問題是它的默認旋轉點是元素的左上角，而不是中心。這就解釋了爲什麼元素旋轉到與標準CSS不同的位置。

可以將其更改爲使用中心作爲旋轉點，但是您需要使用filter樣式中更復雜的語法，使用matrix filter。即使是基本旋轉所需的數學也是有點令人生畏的，因爲它全部以弧度表示，並且這是一個複雜的矩陣變換，但它可以被計算出來，並且如果你知道在哪裏看，包括existing questions here on SO，網絡上有例子。幸運的是，270度旋轉的弧度數字實際上是相對可讀的，但情況並非總是如此。對於大多數情況下，我會推薦使用CSS Sandpaper庫（請參閱下文），而不是手動編制filter矩陣。
其次IE9：

IE9具有雙重問題。這裏的問題是，在IE9中他們加入了對標準CSS transform風格的支持，但他們也保持對舊filter風格的支持。

這意味着在IE9中，您的代碼實際上正在碰撞它們並且正在使用不同的技術旋轉兩次。這導致IE變得完全困惑，因此黑盒子被渲染。

這裏的快速解決方案是設置一個或其他樣式，以便它不被IE9看到。這可能是使用IE版本特定的樣式表或CSS破解，或其他。

因此，這解釋了發生了什麼，併爲您提供了一些關於如何解決它的線索。

但還有一種解決方案可能需要使用。有一個名爲CSS Sandpaper的JS庫，它充當transform風格的polyfill;即它增加了對舊版IE版本的標準CSS轉換支持。

所以我的最佳解決方案的建議是下載CSS砂紙庫，包括它在你的網站，並更改filter風格到-sand-transform:rotate(270deg);

希望有所幫助。

來源

2013-05-29 08:49:38 Spudley

感謝您的快速響應，我會檢查該lib（我發現它前一段時間，但我想嘗試簡單的CSS第一） – Misiu

-1

您的<table>標記存在許多問題，因此可能是造成混亂的原因。

您正在使用<tbody>但沒有<thead>或<tfoot>。 Is a DIV inside a TD a bad idea?
您沒有使用任何<col>元素 -
您<div>內<td>.放置。

它看起來在GG，FF，AS，OWB以及IE10 &也IE9上找到。但在IE8上，jsfiddle完全拒絕出現。

來源

2013-05-29 08:50:11 Jawad

您可以看到結果在：http ：//jsfiddle.net/qYySC/4/embedded/result/多數民衆贊成我的測試方式:) – Misiu

是的，我看到。我只是在這裏猜測你的問題是因爲標記，因爲IE8和更低版本是殘疾人瀏覽器，他們期望適當的標記正確顯示。例如，如果您在FF中查看代碼，您將看到FF自動添加標籤，而IE不會。 – Jawad

@Jawed - 我會更新標記，然後再檢查一次。問題是我的表格是由asp.net gridview生成的，這就是爲什麼有mising標記 – Misiu

ie8和ie9中的表格單元格內容旋轉錯誤

回答

相關問題