Firefox与Chrome填充

Question

I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.

Chrome:

Firefox:

Here's a fiddle that has the problem on it: http://jsfiddle.net/5fuGB/1/

.control{
    position: absolute;
    width: 100px;
    height: 20px;
    top: 30px;
    left: 300px;
    z-index: 1;
}

.highlighter{
    background-color: orange;
    position: absolute;
    width: 100%;
    height:100%;
    left: -2px;
    top: -2px;
    padding-right: 8px;
    padding-bottom: 10px;
    z-index: -1;
}

input{
    width: 100%;
    height: 100%;
}

My Chrome Version: Version 31.0.1650.63 m on Windows 7

My Firefox Version: 25.0 on Windows 7

Thanks for any help you guys can offer.

Answer 1

I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding . This will then override the styles set by the user agent style sheet.

Update

I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.

Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.

Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; -moz-padding-start: 1px; -moz-padding-end: 1px; to input , but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.

Answer 2

I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.

Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/

Answer 3

Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.

Answer 4

You're doing a little more than what's necessary. To get a highlight around that input you can use :focus

So it would be something like this:

CSS

input {
    border: 1px solid white;
}

input:focus {
    border: 1px solid orange;
}

That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.

EDIT Just saw your comment. I dont have the rep to comment so I'll just add on to this.

If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.

I'd also recommend experimenting with those divs within one another and making the most outside div relative.

 Outside Div <------ position:relative;
 Middle Div <------- position: absolute;
 Inner div <-------- position: absolute;

Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.