修复border-bottom none的差距(Fix gap from border-bottom none)

我有一个带border: 1px solid #CCC; border-bottom:none;的<a>标签border: 1px solid #CCC; border-bottom:none; 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');
}

I have a <a> tag with border: 1px solid #CCC; border-bottom:none; style and it's leaves a tiny gap, please look at the codepen result to see what I mean. This gap appears left from login tab if the login tab is active or right from register tab if register tab is active.
 

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;
}
 

Note: the rest of the CSS styles come from 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');
}

                
最满意答案

                
                    
                        
 我建议采用以下方法。 
 

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

 在这种情况下，我会将左，上和右边#tabs放在#tabs元素上，并删除两个子元素上的左/上和上/右边#tab-signin （分别为#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标记来避免这个问题。 
I suggest the following approach.
 

I would take advantage of the fact that in your mark-up the two tab elements, #tab-signin and #tab-signup, are children of the menu#tabs element.
 

That being the case, I would place the left, top and right borders on the #tabs element and remove the left/top and top/right borders on the two children elements (#tab-signin and #tab-signup respectively).
 

The CSS for #tabs would look like:
 

#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;
}
 

To style the .tab-active cases, I would create two specific rules for the sign-in and the sign-up tabs, for the right/bottom and the bottom/left borders respectively:
 

#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;
}
 

See demo at: http://jsfiddle.net/audetwebdesign/By4g5/
 

The problem you noticed earlier is not really a browser bug. The CSS specification does not specify exactly how browsers are to draw the corners of borders (the joints), so you are at the mercy of the browser for that particular design detail.
 

My approach is to avoid the problem by taking full advantage of the HTML mark-up in your code.

更多推荐