Question

我的<a>标签带有border: 1px solid #CCC; border-bottom:none;样式，它留下了一个小小的空隙，请查看codepen结果，看看我的意思。如果登录选项卡处于活动状态，则会从登录选项卡中显示此间隙，如果注册选项卡处于活动状态，则会从注册选项卡中显示此间隙

HTML：

<div id="w-login">
    <div id="login">
        <menu id="tabs"> <a id="tab-signin" class="tab-active"><i class="fa fa-unlock-alt"></i>Login</a><a id="tab-signup"><i class="fa fa-lock"></i>Register</a>

        </menu>
        <div id="signin">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="username" class="control-label col-1">Username:</label>
                    <input type="text" name="username" class="form-control col-2" id="si-username">
                </div>
                <div class="form-group">
                    <label for="password" class="control-label col-1">Password:</label>
                    <input type="password" name="password" class="form-control col-2" id="si-password">
                </div>
                <input type="submit" value="Login" class="btn btn-primary" id="si-submit">
            </form>
        </div>
        <div id="signup">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="username" class="control-label col-1">Username:</label>
                    <input type="text" name="username" class="form-control col-2" id="su-username">
                </div>
                <div class="form-group">
                    <label for="password" class="control-label col-1">Password:</label>
                    <input type="password" name="password" class="form-control col-2" id="su-password">
                </div>
                <div class="form-group">
                    <label for="email" class="control-label col-1">Email:</label>
                    <input type="text" name="email" class="form-control col-2" id="su-email">
                </div>
                <input type="submit" value="Register" class="btn btn-primary" id="su-submit">
            </form>
        </div>
    </div>
</div>

CSS：

#container {
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 14px;
}
#container:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -3px;
}
#w-login {
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    padding: 5px;
}
#login {
}
#signin, #signup {
    border: 1px solid #CCC;
    border-top: none;
    padding: 20px 10px;
    border-bottom-left-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-bottom-right-radius: 15px;
}
#signup {
    display: none;
}
#tabs {
    padding: 0;
    margin: 0;
    border: 1px solid #CCC;
    border-top-left-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-top-right-radius: 15px;
    border-bottom: none;
}
#tabs a {
    padding: 10px 0;
    display: inline-block;
    width: 50%;
    cursor: pointer;
    text-decoration: none;
}
#tabs .tab-active {
}
#tab-signin.tab-active {
    border: 1px solid #CCC;
    border-width: 0 1px 1px 0;
}
#tab-signup.tab-active {
    border: 1px solid #CCC;
    border-width: 0 0 1px 1px;
}
.col-1 {
    width: 28%;
}
.col-2 {
    width: 70%;
    display: inline-block;
}
.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}
.btn {
    width: 99%;
}
.fa {
    padding-right: 5px;
}

注意：其余的CSS样式来自Bootstrap

JS / jQuery的：

$(function(){
    $('#tab-signin').click(function(){
       $('#signup').hide(); 
       $('#signin').show();
       switchTab();
    });
    $('#tab-signup').click(function(){
       $('#signin').hide(); 
       $('#signup').show();
       switchTab();
    });
});

function switchTab(){
    $('#tabs a').toggleClass('tab-active');
}

Answer 1

我建议采用以下方法。

我会利用这一事实，在你的标记中，两个标签元素， #tab-signin和#tab-signup是menu#tabs元素的子项。

在这种情况下，我会将左，上，右边框放在#tabs元素上并删除两个子元素的左/上和上/右边框（分别为#tab-signin和#tab-signup）。

#tabs的CSS看起来像：

#tabs{
    padding: 0;
    margin: 0;
    border: 1px solid #CCC;
    border-top-left-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-top-right-radius: 15px;
    border-bottom: none;
}

要设置.tab-active个案例的样式，我会为登录和注册标签创建两个特定规则，分别为右/底和左/右边框：

#tabs .tab-active{
}

#tab-signin.tab-active{
    border: 1px solid #CCC;
    border-width: 0 1px 1px 0;
}

#tab-signup.tab-active{
    border: 1px solid #CCC;
    border-width: 0 0 1px 1px;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/By4g5/

您之前注意到的问题并不是浏览器错误。 CSS规范没有详细说明浏览器如何绘制边框（关节）的角落，因此您可以使用浏览器来处理特定的设计细节。

我的方法是通过充分利用代码中的HTML标记来避免此问题。

Answer 2

你应该试试漂浮物，但快速修复可能是负边缘......

#tabs{
    padding: 0;
    margin: 0px 0px -1px 0px;
}

DEMO

编辑：内联阻止副作用，需要阅读;）

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

另一种解决方案是在类.tab-active上设置透明边框。

只使用border transparent。

#tabs .tab-active{
    border-bottom: 1px solid transparent;
}

Chec DEMO 。

修复border-bottom none之间的差距

3 个答案: