IE8不動態應用css顯示

我正試圖開發一個表，它隱藏它的列在一個給定的值。我正在使用another SO question中討論的解決方案。作爲該建議的一部分，他們表示爲了支持IE瀏覽器，應該使用隱藏規則，並默認顯示。（我的瀏覽器處於怪異模式）。IE8不動態應用css顯示

我有幾個隱藏規則，如下所示。

table.Show1 .cellType2, table.Show1 .cellType3{ 
     display:none; 
    }

因此，我想到的是cellType2和cellType3當表的className動態變化隱藏。通過初始值，它可以正常工作，但是當表的className動態變化時，它會隱藏所需的單元，但不會將其他單元移回。

我用IE開發工具去了解它，我知道表的className是正確設置的。我還檢查了單元格的樣式，沒有顯示規則集，所以我期望顯示爲默認值，但不是（它不顯示）。

我最討厭的是，如果我在開發工具中更改任何樣式屬性，它會意識到它應該顯示單元格，然後將它重新提交。

爲什麼樣式不適用？請幫我解決這個問題。

編輯：我包含一個「最小」的代碼來重新創建問題。

的JavaScript：

function typeChanged(name, id) 
{ 
    var elem = document.getElementById(id); 
    elem.className = name; 
}

CSS：

table td 
{ 
border-top: 1px none #000066; 
border-right: 1px none #000066; 
border-bottom: 1px solid #000066; 
border-left: 1px solid #000066; 
} 
table.Show1 .cellType2, table.Show2 .cellType1{ 
     display:none; 
} 
table.Show1 td,table.Show2 td 
{ 
border-style: solid solid solid solid; 
border-width: 1px; 
} 
    table.Show1 th,table.Show2 th,table.Show1,table.Show2 
    { 
background: transparent none repeat scroll 0% 0%; 
color: #000066; 
border-style: none none none none; 
table-layout: fixed; 
    }

HTML：

<select onChange="typeChanged(this.options[this.selectedIndex].value,'mytable')"> 
    <option value="Show1">Show1</option> 
    <option value="Show2">Show2</option> 
</select> 
<table id="mytable" class="Show1"> 
    <tr> 
     <th class="cellType1">type1</th> 
     <th class="cellType2">type2-a</th> 
     <th class="cellType2">type2-b</th> 
    </tr> 
    <tr> 
     <td class="cellType1"><input type="text"></input></td> 
     <td class="cellType2"><input type="text"></input></td> 
     <td class="cellType2"><input type="text"></input></td> 
    </tr> 
    </table>

來源

2013-03-19 Sednus

提供一個最小的實例/測試用例。 – 2013-03-20 19:33:00

它很有趣，我試圖爲此創建一個JSFiddle。但該網站不支持IE8。 http://jsfiddle.net/SaaYM/ – Sednus 2013-03-20 22:07:50

從我記得，當你顯示/隱藏行時，IE8和down只是非常難以動態更新表格。我一次使用的一種解決方法是將所有TD內容包裝在它們自己的容器中，然後顯示/隱藏TR的內容，然後取代TR，將高度更改爲1px。 – 2014-04-09 03:15:44

看起來，嘗試重新繪製單元格時出現問題。只是從CSS規則不起作用，但如果我們直接在JavaScript中應用顯示，那麼單元格繪製得當。循環遍歷單元格並直接應用樣式，我只需要有一個名稱約定來輕鬆識別單元格應該是的類。

if(isEmpty(cell.className)|| cell.className == (selectedType+"_cell")) 
    {  
     cell.style.display = 'table-cell'; // might be different for other IE versions 
    } 
    else 
    { 
     cell.style.display = 'none'; 
    }

來源

2013-03-25 12:01:14 Sednus

這聽起來像它不會重新繪製的表格。有幾個IE 7 & 8重繪和迴流oddies有...

你可以嘗試強制重繪在JavaScript，也許只是被隱藏和顯示的東西表像

document.getElementById('myTable').style.display='none'; 
document.getElementById('myTable').style.display='table';

或強迫在整個頁面上回流的東西類似於

document.body.className=document.body.className;

來源

2013-03-20 00:57:50 swider

感謝您的建議，仍然不會重繪單元格。即使我可以看到適用於的正確樣式 – Sednus 2013-03-20 15:33:35

IE8不動態應用css顯示

回答

相關問題