Home/ Questions/Q 9096371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T23:49:58+00:00

I’ve been tackling this tiny but very annoying cross-browser CSS problem: For some reason

  • 0

I’ve been tackling this tiny but very annoying cross-browser CSS problem: For some reason Firefox displays boxes/input fields with different measurements from other browsers. It seems like firefox is somehow ignoring box-sizing: border-box and still measures the boxes by its own measures. What is the cause here? Is there any bubblegum solution to this? I’m ready for it.

What I’m doing here is dynamic jquery input field adder. The fields next to plus button are ‘fakefields’ which for some reason displays different in firefox:

enter image description here

Doctype: XHTML 1.0 Strict

CSS:

.fakeinpfield {
        border: 1px solid #C2C2C2 !important;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px; 
}
input#fakeinpfield3 {
        width: 320px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;

}
input#fakeinpfield4 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}
input#fakeinpfield5 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok I solved it with box-sizing. Seems like I need to use different box-sizing for firefox, since it measures the the box differently (I also set the element to inline-block, but im not sure if this has anything to do with it in the end) More to read: http://www.quirksmode.org/css/box.html

    input#fakeinpfield3 {
        width: 318px !important;
        margin: 3px 6px 0 0;
        -moz-box-sizing: border-box; 
        box-sizing: content-box;
        height: 26px;
        padding: 0;
        display: inline-block;
}
    • 0