折疊的table行元素bug_HTML/Xhtml_網頁製作

來一個例子:代碼很簡單,如下:

如此,一個表格,有兩行兩列,在任何瀏覽器下都沒有任何顯示錯誤.但是如果我加下面這句css,情況就不同了:



看來是要出問題了,可是別著急,其實這個時候從表面上你看不到任何問題,頁面佈局絕對不會亂掉,
你看不到任何東西會重疊起來.

我可從來沒有想過要耍大家,雖然表面上看不到問題,但是現在讓我們的ie develop tool上場吧,它會告訴我們layout帶來了什麼

注意兩幅圖中的不同和相同.注意左邊視圖中的藍色線框圈起來的東西,這個tool的作用就是右邊點擊某個元素會在網頁中用線框框起來.
可是注意,我兩次分別點擊了兩個不同的元素.而線框框起來的是同一個地方,我汗,我沒看錯吧.
是的,也就是說兩個tr重疊了,可是奇怪的是tr裡的元素渲染都完全正確,不影響到任何外觀樣式.不要以為這樣是安全的,隱患在此時埋下.
我其實是在做一個模擬視窗的時候遇到這個問題的,我用了一個兩行的table,第一行做窗口標題欄,可以拖動,第二行做主視圖,可是後來我發現table的第二行把第一行蓋住了,雖然外表看上去很正常,但是標題欄卻因為被擋住不可以點擊和拖動了.
要修復這個現象,去掉tr中的position即可
3.由此說來:
不知道大家寫css的時候是不是用一些reset來先reset下,反正我是這樣做的,我的NetBeans裡的css模板裡就存著reset,每個css文件頭部都會有這樣一段:
代碼如下: content: none;}/* 元素獲得焦點時的樣式! */: focus { outline: 0;}/* 特殊文字的樣式! */ins { text-decoration: none;}del { text-decoration: line-through;}/* 細線表格樣式*/table { border-collapse: collapse; border-spacing: 0; }
大家都知道要絕對定位一個元素的話,首先要使它的父元素定位,例如設置一個position:relative,這樣子元素才可以absolute,然後top,left定位.

於是我就想,這樣太麻煩了,我乾脆給所有的元素都設置position:relative算了,然後要絕對定位的改一下position:absolute.這樣免得挨個設置了,直接所有元素都可以絕對定位了.

於是本文所說的問題來了,我們給所有元素都設置了position:relative,於是table出問題了,所以說這種做法是不可取的,而且這樣會引起一些其他的渲染問題,記得我在好幾個地方都看到提示說不能這樣設定.

本文其實是想說layout的,可是這個問題的確是ie的bug,不是layout問題,下次等我再遇到layout問題再說layout吧.順便說一下,這真是個奇怪的bug.