HTML Checkbox is displayed really large on user's computer in Firefox and Chrome, not in IE
I've encountered an oddity.
On one of our QA tester's boxes, there is an HTML check box that displays very large under Firefox and Chrome, but in IE, it shows up in its default size. On my box and others, the checkbox displays as is typical.
Are there any Windows desktop display settings that would affect the size that checkboxes are rendered in Firefox and Chrome? Is there anything in CSS to beware of?
Here's the combined CSS that affects the control:
开发者_开发技巧various selectors {
display: inline;
margin-top: -1px;
width: 20px;
font-family: Verdana, Helvetica, Sans-Serif;
font-size: 10pt;
height: 22px;
line-height: 20px;
border: 1px solid #6d6d6d;
padding-left: 3px;
padding-top: 3px;
vertical-align: middle;
}
More simply put, avoid using pt
units in CSS, as they may be interpreted differently. Stick to using px
units for as much as you can. So for various selectors
, set font-size: 10px;
Does the QA test box machine have the font set to a different default size in the browser? Set the font size in Pixels of the checkbox to confirm.
精彩评论