Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back?

问题

So, in upgrading to Firefox 3.6, the CSS broke on input boxes. The padding has increased -- it might also be the font-size is somehow behaving different. Wondering if anyone else has seen this problem yet. Can't quite figure it out.

HTML CODE:

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

CSS CODE:

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;
}

(Image dimensions: 109 width x 34 height)

So one thing to note, the fix (as outlined below) includes removing the height, or at least setting it to auto, and then compensating for it by using padding (a fix that bothers me on many levels, but we'll set that aside for now). BUT webkit seems to have its own problems with this now, since it wants to center the text vertically (ignoring any evidence of line-height) according to the height of everything. In other words, if you want the text vertically closer to the top, I haven't been able to figure out a way to do that.

Ideas?

回答1:

Here are a few tips to fixing the problem, as you haven't posted enough information for any concrete suggestions:

Do you use a doctype?
Do you use a reset stylesheet?
Have you validated your markup (HTML and CSS)?

回答2:

Firefox 3.5 and Firefox 3.6 render input css padding differently. I did this and it fixed my inputs. I removed the height and added padding to the top and bottom. The padding heights in combination with my font height made the input the correct height in both browsers and the text to display in the center as I type.

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;
}

回答3:

I'm getting the exact same problem with my own site. I have a public version you can see at: http://www.cleantelligent.com/login-example/

For me it has to do with setting a css image background on the text / password input.

Adding the reset stylesheet (in a local copy) didn't make a difference, and the CSS validates.

EDIT: Removing the height in the CSS and adding more padding seems to do the trick. I narrowed it down to that FF 3.5 and IE put the text at the top of the input vertically, while FF3.6 and webkit center the text vertically. Using padding instead of height to make the box bigger allowed the text to be placed correctly.

回答4:

I had to remove the line-height too, to make it work in IE.

回答5:

Removing the height attribute from the input box and defining the vertical spacing by only using padding solved the problem for me.

回答6:

Padding issue can be solved with this:

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

回答7:

n'thing this issue in FF 3.6. Here's the site where it's happening for me: http://www.pointtopointsurvey.com/ (search box)

I'm using an xhtml transitional doctype and when I run my CSS through validation the only errors I receive are my browser based CSS3 properties (-moz-border-radius).

I'm also using a slightly modified version of Eric Meyer's CSS reset

I would also note that it seems to have only affected vertical padding, not horizontal padding.

回答8:

yep- the cobination of height + padding was breaking it for me in FireFox 3.6. I removed the height on my input and compinsated the loss of this value by increasing the padding on the bottom of the given element. It is fine now. The only problem i have had with FF 3.6 to date was with online forms & input.

(my inputs were using background images)

回答9:

Okay -- I just thought of an (annoying) fix for the webkit problem: add equal parts padding on top and bottom, and align the image positioning down enough to center the text. Anyone have any other (better?) ideas? This only works well in this situation because the input is absolutely positioned. In other scenarios I might have to include a negative top margin to compensate for the extra padding on top, which I try and avoid typically.

Also, don't forget to remove the height, as indicated already in other comments.

回答10:

I fixed this problem with an extra !important css for just inputs, like this:

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

Solved the problem in FF3.6 but let me keep the already working padding in Webkit...

来源：https://stackoverflow.com/questions/2133740/firefox-3-6-and-css-difference-from-previous-versions-of-firefox-3-5-and-back

标签

css

firefox3.6