0

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

2 回答 2

1

将来，您应该始终使用border:0;andborder-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 在每个单位类型中都是相同的。

于 2013-10-29T19:51:12.120 回答
0

input这是容器上的浮动问题。您应该尝试做的是将标签和输入放入容器中div，然后float将labelandinput放在左侧。然后放置一个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>
于 2013-07-29T01:29:06.097 回答