html - block 上的跨浏览器差异

Question

我一直在努力调整我网站上的 block ，使其在 Firefox 上与在 Chrome 和 IE 上相同。我认为这可能与我的 block 中的某些东西有关，每个 block 没有不同的 header 。

你可以在这里查看我的 block :

The LIVESCORE | HANDY LINKS | LATEST POSTS qt block.

正如您在 Chrome 和 IE 上看到的那样，它很好，但在 Firefox 上它就像一个下垂的老太太一样垂下来。选项卡应与面包屑位于同一行。

我已经尝试了很长时间，但我似乎无法解决这个问题。如果有人可以帮助我，我会很高兴，我将不胜感激。

<div id="main-wrapper-inner">
<div id="search-breadcrumb">
<div id="main" class="clearfix">
<div id="content-wrapper">
<div id="content-tops" class="clearfix">
<div id="content-top-inner" class="content-top-1 clearfix">
<div id="content-top-one" class="column">
<div class="region region-content-top-one">
<div id="block-quicktabs-latestpage" class="block block-quicktabs contextual-links-region region-count-1">
<div class="block-inner clearfix">
<div class="content">
<div id="quicktabs-latestpage" class="quicktabs-wrapper quicktabs-style-nostyle jquery-once-2-processed">
<div class="item-list">
<ul class="quicktabs-tabs quicktabs-style-nostyle">
<li class="active first">
<li>
<li class="last">
<a id="quicktabs-tab-latestpage-2" class="active ajax-processed jquery-once-3-processed" href="/latest?qt-latestpage=2#qt-latestpage">Livescore</a>

CSS

ul.quicktabs-tabs li a {
    display: inline-block;
    padding: 0 20px;
}

#quicktabs-latestpage ul.quicktabs-tabs li, #quicktabs-forumstuff ul.quicktabs-tabs li {
    font-family: Oswald,'Arial Narrow',Arial,Helvetica,sans-serif;
    font-size: 13px;
    text-transform: uppercase;
}
ul.quicktabs-tabs li {
    font-family: 'Anton',Arial Narrow,Arial,Helvetica,sans-serif;
    font-size: 28px;
}
.block ul li {
    list-style: none outside none;
}
ul.quicktabs-tabs li {
    list-style-type: none;
    white-space: nowrap;
}

Answer 1

您的 Quicktabs UL(实时比分、便捷链接、最新帖子)不在 <div id="search-breadcrumb"> 内div，它位于您的“内容”div 中。

浏览器可能会发现将它放在面包屑旁边更容易、更自然，如果它确实在面包屑旁边。明智地构建页面几乎肯定是一个很好的起点。