HTML 表单的跨浏览器兼容性问题

Question

我制作了一个具有可怕的跨浏览器兼容性的输入表单。我使用特定于浏览器的 CSS hack 来解决我的大部分问题，但是真的变得非常复杂，我不想继续沿着这条路走下去。

表单是一个 800px 宽文本输入（785px 宽度 + 5px 边框 + 10px 填充）和 100px 宽提交按钮，所有在 900px 宽 div 内将它们放在一起。

问题是文本输入宽度因浏览器而异 1px，这导致位于文本输入右侧的输入按钮被额外的像素向下推。我通过将宽度从 785px 更改为 784px 为大多数具有浏览器特定黑客的浏览器修复了此问题，但想知道是否还有其他我遗漏的东西导致了这个问题。

这是一个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

尝试使用 % 而不是像素，应该可以解决问题，稍后您可能需要做一些响应，因此 % 也会在这方面节省您的时间

Answer 2

就用CSS box-sizing 属性，所有浏览器都支持，IE>=9。您需要更改以下内容（仅）：

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

看看 Fiddle。

属性值的定义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 e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 350px;}

你可以看到这些天人们放弃了对 IE8 的支持，所以在 CSS 开始时他们只是说：

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

（让他们的生活更轻松）。

HTML 表单的跨浏览器兼容性问题

Cross browser compatibility issues with HTML form

html

css

firefox

google-chrome