Question

所以基本上我有一个小的注册表格，我的输入框有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;
}

这是我的sign_up_form

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

Answer 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都相同。

Answer 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>

为什么“border-top：none”将我的css的其余部分放在一边？

2 个答案: