呈現跨瀏覽器的相對定位元素的差異

我最近爲當地一家旅遊公司製作了一個新的WordPress主題，他們現在得到的報告表明，我設計中的兩個元素在Firefox中的位置不正確（似乎特定於3.6版）和Mac版Chrome。呈現跨瀏覽器的相對定位元素的差異

一個頁面，這兩個問題都可見：http://www.totemtravel.com/blog

問題：

白旗與每一頁的頂部就可以了標誌跳到幾英寸到覆蓋區域的右側第一個電話號碼的代碼。
側邊欄中博客類別小部件底部的搜索按鈕向右跳出小部件並離開頁面內容包裝。

我認爲這個問題與那些瀏覽器在相對定位之前假定該項目應該在哪裏有關，但我需要一種方法使這些在所有現代瀏覽器中看起來都一樣。

我不會在主題背後粘貼源代碼頁面，因爲它可以用Firebug或Chrome檢查器輕鬆查看，但請讓我知道是否有任何其他信息會有所幫助。

來源

2011-12-12 Daemon Fisher

1：白色標誌的img必須留有：0。並非所有瀏覽器都默認爲0。例如，Firefox默認爲50％。另一個問題是，你試圖相對定位td元素的標題「圖騰旅行」，這是無效的，我會建議在這裏使用div而不是表格。

2：這是由於本機CSS樣式的瀏覽器差異。這就是爲什麼人們使用CSS重置樣式表，把所有東西都清零，所以你肯定知道「默認」CSS是一樣的。這裏有一個例子：http://meyerweb.com/eric/tools/css/reset/。現在對你的css的影響是，提交按鈕落在輸入下面，因爲它沒有足夠的空間 - 所以當你相對定位它時，它在瀏覽器中關閉。

3：相對/絕對定位一切並不是最好的方式去造型網站。你會發現許多不一致的地方，如你正在經歷的，並有更好的方法。我建議訪問網站上的一些示例主題，例如themeforest.com或elegantthemes.com，看看他們如何做他們的CSS和HTML

來源

2011-12-12 23:52:20 Vigrond

呈現跨瀏覽器的相對定位元素的差異

回答

相關問題