为什么“border-top:none”会让我的 css 的其余部分不合适？答案

【问题标题】：Why does "border-top:none" put the rest of my css out of place?为什么“border-top:none”会让我的 css 的其余部分不合适？
【发布时间】：2013-10-30 03:51:12
【问题描述】：

所以基本上我有一个小的注册表单，我的输入框有 css 问题，我基本上希望它有一个扁平的外观（没有侧边框或上边框），只有下边框。

在 chrome 中它工作正常，它不会弄乱输入表单的位置。但在 IE 和 Firefox 中它放错了位置。如果我删除“border-top：none;”它修复了它，但显然在顶部添加了我不想要的边框。有关如何解决此问题的任何提示？

这是用于修改输入框的css部分。

    #sign_up .sprited {
    outline: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #7A7A7A;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
    padding: 5px;
    width: 300px;
}

这是我的注册表格

 <div id="sign_up_form">
                <div class="Labeltxt">Full Name :</div>
                <div class="RoundtxtBox">
                    <input type="text" name="fname" value="" class="sprited">
                </div>
                <div class="Labeltxt">Email Id :</div>
                <div class="RoundtxtBox">
                    <input type="text" name="uemail" value="" class="sprited">
                </div>
                <div class="Labeltxt">Password :</div>
                <div class="RoundtxtBox">
                    <input type="password" name="upassword" value="" class="sprited">
                </div>
                <div id="actions">
                    <a href="#" id="cancel" class="close form_button">Cancel</a>
                    <input type="submit" class="regsub" name="submit" value="Join" />
                </div>
            </div>
            </form>
            <!--<a href="#" class="close" id="close_x">close</a>-->
        </div>

【问题讨论】：

标签： html css internet-explorer firefox

【解决方案1】：

以后，您应该始终使用border:0;和border-top:0;，而不是border-top:none;。这可能会解决问题，这是编写它的正确方法。此外，为了让您的网站加载更快，您可以这样：

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;

进入这个：

-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;

只需删除它的单位类型。 0 在每个单位类型中都是相同的。

【讨论】：

【解决方案2】：

这是input 容器上的一个浮动问题。您应该尝试将标签和输入放入容器div 和float 以及左侧的label 和input。然后放置一个div，它将清除float。

这通常是我使用的技术。如果不清楚，请告诉我。

CSS：

.clear {
    clear: both;
    float: none;
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
 }

HTML：

<div>
    <label>Full Name: </label>
    <input type="text" ... />
    <div class="clear">
</div>

【讨论】：

非常感谢您的回答，遗憾的是我尝试了多种变体，但无法使其工作：/我用“sign_up_form”编辑了我的问题，希望您能提供更多信息帮帮忙，如果你不介意的话。非常感谢。
我把它改成，border-top-color: transparent;