Firefox 尺寸渲染对比其他浏览器答案

【问题标题】：Firefox size rendering vs other browserFirefox 尺寸渲染对比其他浏览器
【发布时间】：2015-05-16 18:10:03
【问题描述】：

请看这个jsfiddle

HTML：

<body>
<header>
    <div id="top-header">
        <div id="search-div">
            <form method="get" name="search">
                <input value="Search" id="search-button" type="submit">

                <input name="term" id="search-box" type="search">

                <div id="search-options">
                    <ul>
                        <li id="search-option-icon">0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <input name="search-type" id="search-type" type="hidden">
                </div>
            </form>
        </div>
    </div>
    <div id="bottom-header">something here</div>
</header>
</body>

CSS：

*{
    margin:0;
    padding:0;
    font-size:100%;
   border:0 none;
}

body{
    direction: rtl;
}

header{
    position:relative;
    width:100%;
    height: 80px;
}


/*
--------------------------------------------------------
|   header
--------------------------------------------------------
*/
header > div{
    width: 100%;
    position:relative;
    position: relative;
}

#top-header{
    background: #9600ee;
    height: 52px;
}

#bottom-header{
    background: white;
    height: 29px;
    border-bottom: 1px solid #d5d5d5;
    box-shadow:0 1px 1px #e0e0e0;
}

#img-logo{
    display: inline-block;
}

/*
--------------------------------------------------------
|   header > search-div
--------------------------------------------------------
*/
#search-div{
    width:432px;
    position: absolute;
    top:8px;
    height: 36px;
    left:0;
    right:0;
    margin:auto;
    z-index: 3;
}

#search-options{
    height: 36px;
    width: 49px;
    background: #FFFFFF;
    background: linear-gradient(#FFFFFF,#e6e6e6);
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    left:0;
}

#search-options > ul > li{
    display: none;
}

#search-option-icon{
    display: block !important;
}

#search-options:hover > ul > li{
    width: 49px;
    background: red;
    display: block;
}

#search-box{
    display: inline-block;
    height: 36px;
    width: 325px;
    right:49px;
    padding:0 5px;
    border-right:1px solid #9600ee;
    border-left: 1px solid #d1d1d1;
}

#search-button{
    height: 100%;
    width: 48px;
    background: #FFFFFF;
    background: linear-gradient(#FFFFFF,#e6e6e6);
    border-radius: 0 2px 2px 0;
}

我要创建一个页面，它的方向是从右到左。我不知道为什么 Firefox 显示的结果与其他浏览器不同？

我在 Chrome 中看到的内容：

Firefox 显示的内容（Firefox 37）：

有什么问题？为什么 Firefox（或我的 Firefox）显示不同的结果？

【问题讨论】：

标签： html css google-chrome firefox browser

【解决方案1】：

您的#search-div 太窄，导致元素挤在一起。您的搜索 div 也出现故障。我建议按搜索选项、搜索框、搜索按钮的顺序排列它们，然后添加 float: left;他们的每个样式以及一些margin-left：20px；所以它们不是紧挨着的。

您的搜索框也有一个小宽度的字母。

查看这个 jsfiddle：http://jsfiddle.net/3qzb7q0d/1/

类似：

#search-options {
  display: inline-block;
  float: left;
  margin-left: 20px;
  // whatever else
}

将其添加到每个搜索部分。

增加#search-button的宽度

从#search-div 中移除宽度

【讨论】：

哦，我当然知道，我说为什么Firefox和其他浏览器不同！ PX 就是 PX，应该没有什么不同
出于某种原因，firefox 使 #search-box 比 chrome 宽 17px，导致表单比其包含的 div 宽，但我不知道为什么。但是，您可以通过编写适当的标记和样式来边缘化此类问题。
谢谢，但我需要知道原因！

【解决方案2】：

输入元素会根据浏览器和操作系统呈现不同的外观。一旦您将type 更改为search，Chrome 似乎就会将box-sizing: border-box; 应用于输入元素，但 Firefox 并没有这样做（目前我会说 Firefox 是正确的，但我需要检查一下规格）。

Firefox 不会更改这些元素的 box-sizing，因为默认的 box-sizing 是 content-box，完整的 外部宽度 是 width + padding + border （更多细节你可以看这里CSS-Tricks: Box Sizing）。至此，您在 Firefox 中的 #search-box 没有325px 的 outer-width。

如果您想更好地控制元素的外部宽度，您需要将border-box 用于box-sizing。您可以使用以下方法更改整个页面的box-sizing：

html {
  box-sizing: border-box;
}

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

来自网站的代码：Paul Irish: * { Box-sizing: Border-box } FTW

使用border-box更新了jsfiddle。

【讨论】：

我不知道！