Question

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

表单是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

只需使用CSS box-sizing属性，所有浏览器都支持它，IE＆gt; = 9。您需要更改以下内容（仅限）：

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

查看Fiddle。

属性值的定义 border-box ：

width和height属性包括填充和边框，但是不是保证金。这是Internet Explorer使用的盒子模型文档处于Quirks模式。注意：填充＆amp;边境将在里面例如，盒子IF .box {width：350px};然后你申请{border：10px 纯黑;} RESULT {在浏览器中呈现} .box {width：350px;}

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

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

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

Answer 2

尝试使用％代替像素，应该做的伎俩，以后你可能要做一些反应，所以％会节省你的时间也

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

2 个答案: