Firefox 3.6和CSS與Firefox 3.5以前版本的區別和背後？

因此，在升級到Firefox 3.6時，CSS會在輸入框中打破。填充增加了 - 也可能是字體大小在某種程度上表現不同。想知道是否有其他人看到這個問題呢。不能完全弄明白。Firefox 3.6和CSS與Firefox 3.5以前版本的區別和背後？

HTML代碼：

<form> 
    <fieldset> 
     <label for="inputField">Label</label> 
     <input type="text" id="inputField" /> 
    </fieldset> 
</form>

CSS代碼：

form fieldset label { 
    display:block; 
    font-size:1.2em; 
    font-weight:bold; 
    padding:12px 9px; 
} 
#jumptoBox fieldset input { 
    background: url("../images/input.png") no-repeat scroll left top transparent; 
    font-size: 1.2em; 
    padding: 4px 5px 16px; 
    width: 99px; 
    height: 29px; 
}

（圖像尺寸：109寬×34高度）

所以有一點要注意，在定位點（如下面所概述）包括刪除高度，或者至少將其設置爲自動，然後使用填充（一種在很多層面上困擾我的修補程序，但我們現在將暫時擱置）補償它。但是webkit現在似乎有它自己的問題，因爲它想根據一切的高度垂直居中文本（忽略任何行高的證據）。換句話說，如果你希望文本垂直靠近頂端，我一直無法找到一種方法來做到這一點。

想法？

來源

2010-01-25 Arx Poetica

你能後的CSS或鏈接？ – Tom 2010-01-25 16:34:32

3.6有一個新的渲染引擎，在這裏看到類似的問題：http://stackoverflow.com/questions/2120499/what-changed-in-firefox-3-6-to-make-uls-render-differently – 2010-01-25 16:49:05

是的，當我尋找修復程序時，我確實看到了這個問題/問題。我實際上恢復到Firefox 3.5.7，因爲我沒有時間處理它。我會嘗試提供更多的信息，當我可以（例如CSS）。我注意到的一件事 - 當我進行升級時，它並不是它在這個特定網站上發生的唯一地點，所以它不僅僅是孤立在網站上的一個地方。 – 2010-01-27 23:34:35

這裏有一些提示，以解決這個問題，因爲你還沒有公佈足夠的信息，任何具體的建議：

你使用doctype？
您是否使用重置stylesheet？
你有validated your markup（HTML和CSS）？

來源

2010-01-25 16:46:59 Marius

是的，使用文檔類型： <！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> 使用YUI重置。 – 2010-03-18 16:20:50

我得到了與我自己的網站完全相同的問題。我有一個公共版本，你可以看到：http://www.cleantelligent.com/login-example/

對我來說，它與設置文本/密碼輸入的CSS圖像背景有關。

添加重置樣式表（在本地副本）沒有有所作爲，和CSS驗證。

編輯：刪除在CSS的高度和增加更多的填充，似乎這樣的伎倆。我將其縮小到FF 3.5和IE將文本垂直放置在輸入頂部，而FF3.6和webkit垂直放置文本。使用填充而不是高度使框變大可以使文本正確放置。

來源

2010-01-25 20:17:02

我最初將其標記爲答案，但它似乎仍然在webkit中爲文本需要靠近頂部或底部的圖像打破。 Webkit試圖垂直居中。想法？ – 2010-03-18 16:30:56

在FF 3.6中沒有這個問題。這裏是它發生在我身上的網站：http://www.pointtopointsurvey.com/（搜索框）

我正在使用xhtml過渡文檔類型，當我通過驗證運行我的CSS時，我收到的唯一錯誤是基於瀏覽器的CSS3屬性（-moz-border -半徑）。

我還使用Eric Meyer的CSS的略加修改重置

我還要指出，這似乎只有受影響的垂直填補，不是水平的填充。

來源

2010-01-25 23:37:18 Rick

我解決了這個問題，一個額外的!important CSS的只是輸入，就像這樣：

input.gld-editable-input { 
padding: 3px 6px !important; 
}

解決了FF3.6問題，但讓我保持的Webkit已經工作填充...

來源

2010-01-26 15:42:58 Sjoland

Firefox 3.5和Firefox 3.6以不同方式呈現輸入css填充。我這樣做，它修復了我的輸入。我刪除了高度並在頂部和底部添加了填充。與我的字體高度結合的填充高度使輸入在兩個瀏覽器中都處於正確的高度，並在我輸入時顯示在中間的文本。

BROKEN：

input 
{ 
    border: 1px solid #d7d7d7; 
    background-color:#fff; 
    height:19px; 
    padding:5px 2px 0 2px; 
}

FIXED：

input 
{ 
    border: 1px solid #d7d7d7; 
    background-color:#fff; 
    padding:5px 2px; 
}

來源

2010-02-02 15:22:59 bshack

卸下從輸入框的高度屬性和僅通過使用填充限定的垂直間距解決了這個問題對我來說。

來源

2010-02-05 11:42:41 Ilium

我不得不刪除行高，以使其在IE中工作。

來源

2010-02-08 11:15:06 Axnorv

是的 - 高度+填充的組合在FireFox 3.6中爲我打破了它。我刪除了輸入的高度，並通過增加給定元素底部的填充來補充此值的丟失。現在沒事了。迄今爲止我唯一遇到的問題是使用在線表格&輸入。

（我投入使用的背景圖片）

來源

2010-02-25 17:07:15 Ian

另請參閱我的webkit場景解決方案。 – 2010-03-18 16:43:44

好了 - 我只是想到了一個（煩人）定出WebKit的問題：加入等份填充頂部和底部，並對準形象定位不夠下來將文字居中。任何人有任何其他（更好？）的想法？這隻適用於這種情況，因爲輸入是絕對定位的。在其他情況下，我可能必須包含一個負的頂部邊距，以補償頂部的額外填充，我會盡量避免這種填充。

此外，不要忘記刪除高度，如其他評論中已經指出的那樣。

來源

2010-03-18 16:42:14

另外，需要IE特定的樣式，因爲IE想要將文本垂直放置在頂部。 – 2010-03-18 18:01:31

填充問題可以用這個來解決：

input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner 
{ 
padding: 0px; border: 0px 
}

來源

2011-01-28 13:55:09 Dennis

我明白你的意思了：http://archivist.incutio.com/viewlist/css-discuss/98999 – 2011-02-09 19:27:29

Firefox 3.6和CSS與Firefox 3.5以前版本的區別和背後？

回答

相關問題