CSS定位不一致跨瀏覽器

我遇到了瀏覽器之間的一些定位不一致。我試圖定位一個提交按鈕，以便它懸停在textarea的下角。CSS定位不一致跨瀏覽器

在Chrome中，Safari和其他瀏覽器工作原理就像它應該：

Chrome Screenshot

然而，在Firefox中，我得到這個：

Firefox Screenshot

是否有不同定位該元素的方法，還是我讓我的東西離開了我的CSS？

這裏是鏈接到HTML和CSS：http://www.tylonius.com/clients/X10/GalleryDisplay.html

來源

2012-06-20 Ty Morton

CSS和HTML代碼請 –

你是否在任何地方設置字體大小？嘗試設置「html {font-size：1em;}」，這樣整個頁面的字體大小就會被標準化。它可能需要設置爲100％或像16像素的絕對值。我有一陣子沒有這樣做，也不確定。 – kingcoyote

需要更多的信息，比如父容器的大小，因爲它們可以在Chrome和Firefox中進行比較，以瞭解數學運算的關鍵位置。 – McAden

我剛剛將截圖放入photoshop中，並測量了包含元素的底部填充。在頂部的圖像是11px高。底部圖像是13px。我猜這就是你的問題，但沒有看到你的代碼是不可能肯定的。嘗試查看周圍元素的CSS。我不認爲<input>元素是你的問題。

編輯現在

，我可以看到你的代碼，我敢肯定這個答案是正確的。問題是周圍箱子的長度。你需要做的是從#gallery-commentform採取樣式，並將其應用於包含表單的div。然後絕對將textarea和submit相對於左下角定位。這樣，無論瀏覽器如何渲染height/padding/yaddayadda，它總是與表單底部的距離相同。

來源

2012-06-21 00:23:10

這是一個很好看的形式，順便說一句 –

這和Brian的建議似乎已經做到了。 –

耶！很高興我們可以幫助 –

我最近處理了很多這樣的問題，我會做的第一件事是檢查填充，邊距和邊框。我敢打賭，Firefox設置的某些默認屬性與其他瀏覽器不同，因此您需要覆蓋該屬性。檢查員的'計算樣式'選項卡應該足以找出是否是這種情況。

來源

2012-06-20 23:45:20 OneThreeSeven

絕對地提交按鈕的位置。

position: absolute; 
bottom: 0; 
right: 0;

確保它的父元素的位置被設置爲relative。

來源

2012-06-21 01:58:22 iambriansreed

沒有。絕對定位不適用於可摺疊評論輸入。如果這很簡單，我不會打擾任何人。 :-) –

@TyMorton Yup。是的;在一個小提琴中拋出HTML/CSS，我會證明它。 – iambriansreed

我站好了！我以前曾嘗試過，但父元素不是DIV，而是它的形式。當我將它設置爲相對並嘗試它時，它完美運行！ –

CSS定位不一致跨瀏覽器

回答

相關問題