Cross browser compatibility issues with HTML form

Question

I made an input form that has horrible cross browser compatibility. I used browser specific CSS hacks to fix most of my issues but that got really complicated really fast and I don't want to keep going down that path.

The form is an 800px wide text input ( 785px width + 5px border + 10px padding) and 100px wide submit button, all inside a 900px wide div keeping them together.

The problem is that the text input width varies by 1px from browser to browser which causes the input button, which is located on the right of the text input, to get pushed down by the extra pixel. I fixed this for most browsers with browser specific hacks by changing the width from 785px to 784px but was wondering if there's something else I'm missing that's causing this.

Here is a JSFiddle .

CSS:

div.formdivholder {
    width: 100%;
    height: 70px;
    padding-top: 20px;
}

div.formdiv {
    width: 900px;
    height: 70px;
    margin: 0 auto;
}

input.text {
    z-index: 20;
    height: 38px;
    width: 785px;
    float: left;
    padding-left: 10px;
    border: solid;
    border-width: 5px;
    border-color: #3374DC;
    border-right: 0px;
    background-color: #F0F4FA;;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}

input.submit {
    z-index: 1;
    height: 50px;
    width: 100px;
    float: right;
    color: #F0F4FA;
    font-weight: bold;
    background-color: #3374DC;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border-width: 0px;

}

HTML

<div class="formdivholder">
    <div class="formdiv">
        <form class="search" role="search" method="get" action="/searchresults.php">
            <input type="text" name="input" class="text" placeholder="Search for"> 
            <input type="submit" class="submit" value="Search"> 
        </form>
    </div>
</div>

Answer 1

Just use CSS box-sizing property, it is supported by all browsers and IE>=9. You would need to change the following (only):

input.text {
    height: 50px;
    width: 800px; /* OR even this: width: calc(100% - 100px)  */
    box-sizing: border-box;
    ....
}

Take a look in Fiddle .

Definition of the property value border-box :

The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note: Padding & border will be inside of the box eg IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 350px;}

You can see these days people drop support to IE8, so at the start of CSS they simply put:

*, *:before, *:after {
    box-sizing: border-box;
}

(and make their life easier).

Answer 2

尝试使用％而不是像素，应该可以解决问题，稍后您可能需要做一些响应，这样％还将节省您在该像素上的时间