Detecting CSS browser inconsistent rendering by means of JavaScript?

I have a input[type="text"] that has padding applied to it and it behaves differently in firefox PC then on a mac.

Can I debug this inconsistency with开发者_运维问答 JavaScript? Based on the code below, does anyone have any sugestions to resolve my issue?

Firefox on Windows (firebug inspection)

.searchContainer input {
   border-color:#7C7C7C #C3C3C3 #DDDDDD;
   border-style:solid;
   border-width:1px;
   color:#555555;
   float:left;
   height:12px;
   padding:3px;
  }

Firefox on Mac(firebug inspection)

.searchContainer input  {
   border-color:#7C7C7C #C3C3C3 #DDDDDD;
   border-style:solid;
   border-width:1px;
   color:#555555;
   float:left;
   height:12px;
   padding:3px;
 }

No other styles are applied to these inputs.

Any suggestions?

You don't seem to be setting a font-size. When you force a height on an input field, you should specify one. It's perfectly conceivable that Macs and PCs have different standard font sizes for input elements.

That said, it's probably better to define the height of the input by setting padding and font-size but no height at all. That way, the browser can handle it easier if the user is using an enlarged font (or the "Text zoom" function in Firefox).

Since you're specifying the input's height in pixels, you'll probably also want to specify the font size in pixels. It looks like platform-specific font rendering may be the culprit here.

It looks like it could be an issue with the font size in the input text box (and maybe the buttons, too). Setting the font size (and even the font family) may solve the problem.

Check navigator.platform in Javascript.