跨不同瀏覽器定位

Question

我遇到了一個問題，即頁面上某個元素在不同瀏覽器中的位置不同。這是幻燈片在; http://nevillebeandesign.com/Tattoo/bobShaw.html 在Safari中，它比Firefox和Chrome要高几個像素，而在Opera中則要低得多。我不得不縮小其大小，以免它與背景圖像中的紅線重疊（最初在Safari中，它緊緊地放在兩條紅線之間）。是否有某種修復方法可以放入文檔頭，以調整不同瀏覽器的位置？謝謝！

Answer 1

該問題與您正在使用的<對象>有些相關，該元素插入單元格內。此外，許多古老的怪癖開始發揮作用，因爲你依賴於過時的標記結構（表格）。基本上，你的元素在CSS中被稱爲inline-block。這意味着它可以接受垂直對齊屬性。然而，在你的情況下，你強制瀏覽器使用他們的內部算法，因爲你已經使用了align屬性（不贊成使用）。這就是爲什麼你在各種瀏覽器中看到不同的垂直對齊。爲了解決這個問題，請提供具有規定高度的對象元素，並嘗試將「vertical-align：middle」CSS聲明應用於對象本身。您也可以嘗試在對象的容器上設置適當的「行高」。