2011-05-17 79 views
3

工作,我有一個頁面是這樣的:CSS子選擇器不會對IE9

<body> 
<table width="100%">...</table> 
<table width="100%">...</table> 
<table width="100%">...</table> 
<table width="100%">...</table> 
</body> 

我需要做的是使所有這些表85%的寬度和水平居中網頁上的內容。如果頁面是單個頁面,這很容易,但這需要在100多個頁面上工作,它們唯一共同的地方就是樣式表文件。所以我只需要用CSS來做到這一點。我無法覆蓋div中的表格或使用jquery。

我的嘗試是:

body { text-align:center; } 
body > table { text-align: left; margin: 0 auto; width: 85%; } 

這工作完全在Firefox和谷歌Chrome,但它似乎並沒有在IE9工作(沒有測試,但我敢肯定它不會與工作早期即版本)

我已經嘗試了很多方法,他們寫了類似的問題,但無法解決這個問題。

編輯:

的網頁的DOCTYPE是:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

我改成了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

,它現在也工作在IE9!

更新的問題是:有沒有可能不更改文檔類型?

+2

我敢肯定***孩子選擇器本身工作得很好。另一方面,由於'table'元素的'width'屬性,CSS'width'規則可能會被忽略。您是否嘗試從標記中移除'width =「100%」'? - 它真的不屬於那裏。 – 2011-05-17 01:49:11

+0

嘗試過,情況並非如此。 – 2011-05-17 02:27:04

+0

選擇器「不工作」與未應用CSS規則相比是一個非常不同的問題。 – 2011-05-17 02:29:25

回答

4

正如姜毅說,你的DOCTYPE聲明是不正確的。 IE9可能無法弄清楚該怎麼做,因此運行並隱藏在其怪異模式外殼中,其對於子選擇器變得盲目(或變成10 years younger)。

的最簡單和肯定,推薦的方式是改變你的DOCTYPE聲明,以獲得回標準模式,並應用規則:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

否則,你可以嘗試放棄孩子選擇和嘗試重置你想使用任何默認樣式的表格中的其餘樣式:

body { text-align:center; } 
body table { text-align: left; margin: 0 auto; width: 85%; } 
body * table { /* Styles for other tables */ } 

但正如你看到的,*選擇有看起來不是很友好,所以改變了DOCTYPE肯定是採取更好的路徑。

1

我放在一起這樣的jsfiddle,它看起來像它可以在IE9:

http://jsfiddle.net/XFgLf/

+0

是的,但仍然是。它不起作用在我的網站上。 – 2011-05-17 02:27:25

+1

沒有使用CSS重置,相同的小提琴是否工作?取消選中「規範化CSS」框。 (對不起,我現在無法測試這個,因爲我現在正在接近Windows機器。) – 2011-05-17 02:30:30

+0

啊,我將doctype從「4.01 Transitional」設置爲「1.0 Transitional」,現在看起來像是在工作。但我現在想知道,是否有一種解決方案可以在不改變文檔類型的情況下應用(僅在使用css時我纔會這樣做)(我沒有設計這個站點,我也不想編輯數百個文件) – 2011-05-17 02:40:38