Chrome/Safari 和内联块元素答案

【问题标题】：Chrome/Safari and inline-block elementsChrome/Safari 和内联块元素
【发布时间】：2014-07-15 19:10:25
【问题描述】：

所以我在内联块中有一些元素，它们在 Firefox 中显示完美，但由于某种原因，在 Safari 和 Chrome 中，定位全部关闭

CSS：

#bb-tools {
    float: right;
    width: 100%;
    text-align: right;
    position: absolute;
    z-index: -1;
}

.main-tools {
    display: inline-block;
    color: #000000;
    font-size: 0.8em;
    margin-top: 10px;
    width: auto;
    height: 30px;
}

.main-tools a img.icon-space { margin-right: 5px; }

.main-tools a {
    color: #000000;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0 0 0 15px;
}

.main-tools a:hover {
    color: #f4cdd4;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.search-box-responsive {
    display: block;
    float: left;
    height: auto;
}

HTML：

<div id="bb-tools">
  <div class="main-tools"> <a rel="nofollow" href="#"><span class="login">Log In</span></a> <a href="#"><span class="help">Help</span></a> <a class="basket" rel="nofollow" href="#"><img src="http://www.placehold.it/20x23" width="18" height="20" style="display:inline-block; border:0;" alt="" /> <span class="basket-contents"> <span class="basket-count"><sup> (100) </sup></span></span></a>
    <div class="search-box-responsive">
      <form class="search-responsive" role="search" method="get" action="#">
        <fieldset>
          <input id="headerSearch" name="q" type="text" placeholder="Search" />
          <input id="headerSearch" value="" type="submit" />
        </fieldset>
      </form>
    </div>
  </div>
</div>

如果在 Firefox 中打开小提琴，请查看它应该显示的内容： DEMO

谁能解释一下？感谢阅读

【问题讨论】：

标签： html css

【解决方案1】：

发生这种情况是因为您的锚都没有浮动，因此它会将表单向下推到下一行，然后才能浮动。

如果您将锚点包装在 div 中，然后将 float:right 添加到该 div，它应该可以解决您的问题

Example

【讨论】：

为什么这在 Firefox 中没有发生？
是的，我明白为什么会这样，但我不明白这对 firefox 没有影响吗？
浏览器对浮动的处理方式不同，我认为这与文档的流动有关。我认为firefox必须先应用浮动，然后渲染其余的非浮动元素，因为chrome可能会按照它们出现的顺序渲染元素，然后再应用浮动 - 但我不确定

【解决方案2】：

请注意确定导致问题的原因，因为我没有得到您想要通过 css 实现的目标。

如果您只想解决问题，可以将.search-box-responsive 放在DOM 中的链接之前，如果可能的话。

Demo（在 safari 和 chrome 中测试）

旁注：据我所知，float 对绝对可能的元素没有影响。

【讨论】：

【解决方案3】：

在#bb-tools div 之后添加.search-box-responsive div

http://jsfiddle.net/4tjJt/2/

【讨论】：