两个相邻的div在Chrome中不接触

Question

我正在尝试在网页中创建一个标签式界面，具有轻微的透明度。我非常接近我想要的东西，但它有一个问题 - 它取决于浏览器。

出于用户体验的原因，我希望标签下方的“页面”看起来真的与标签连接，因此标签不会浮动在标签上方。问题是，当他们在Chrome中刷新时，Firefox中存在重叠，而当他们在Firefox中刷新时，Chrome中存在差距。并且由于透明度，重叠会改变颜色并且看起来很糟糕。

在此页面上很难进行标记更改。它需要一个CSS解决方案。

这就是我想要它的样子。

小提琴：http://jsfiddle.net/uwULR/

代码是

<div class="tabs" id="searchSwitchers">
        <input type="button" id="StandardSearchButton" value="Standard search" class="SearchFormButton switchableTab-inactive" autocomplete="off"/>
        <input type="button" id="AdvancedSearchButton" value="Advanced search" class="SearchFormButton switchableTab-active"autocomplete="off" />
    </div>
    <div class="tabbed">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

风格：

body {
    background-color: #000;
}


.tabbed {
      -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
          padding-left: 1em;
          padding-right: 1em;
          padding-bottom: 1em;
          margin-left: -1em;
        background-color: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    vertical-align: bottom;
    width: 100%;
    padding: 1em;
    margin-top: -2px; /*This makes it work in Chrome but breaks it in Firefox*/
}

.switchableTab-active {
    color: #0047B9;
display: inline-block;
background-color: rgba(255, 255, 255, 0.75);
padding: 0.5em 1.25em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;

    border: none;
font-size: 1em;
}

.switchableTab-inactive {
    color: #5987d1;
display: inline-block;
padding: 0.5em 1.25em;
background-color: #CADDFA;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
    border: none;
font-size: 1em;
}

div.tabs {
}

.switchableTab-inactive:hover {
border-right: 1px solid #5987d1;
border-top:1px solid #5987d1;
border-left:1px solid #5987d1;
}

Answer 1

通常使用display:inline-block进行2 div对齐时。出现此问题。

解决这个问题的方法很少;但是我给出了另一个解决方案。查看 DEMO 。

input.SearchFormButton{font-size:14px;} /*again set the font-size as parent element have size 0*/
div.tabs {
    font-size:0; /*giving font-size:0 space removed*/
}

Answer 2

你的边界定义为1px并且继承了边距。

添加

.tabs input[type='button'] {
    margin-bottom: 0px !important;
    border-bottom-width:0px !important;
}

应该做的伎俩

http://jsfiddle.net/PH75U/

Answer 3

因为您使用的输入具有继承的边距和边框... 使用

input[type='button'] {
margin: 0;
border:none;
}

强烈建议：不要对标签使用输入...使用div和js