Question

我在div中有两个文本字段。在Chrome，Opera和Safari中，第二个文本字段的位置比上一个文本位置略高。 Safari和IE中的Hovewer位置恰到好处。

以下是您尝试使用的代码：http://codepen.io/anon/pen/PwoKZr

这是一个显示问题的简单图片： enter image description here

以下是相关部分：

<body style="

    font-size: 14px;">
    <div id="container" class="container_16">
        <div id="mainSection" class="grid_16">
            <div id="newUserBox" style="
    text-align: center;
">

                <input id="userEmail" type="text" style="
    /* text-align: center; */
    width: 300px;

    padding: 8px 10px;
    font-size: 18px;
" placeholder="E-Mail"><br>

    <input id="userPass" type="text" style="
    /* text-align: center; */
    width: 300px;
    /* margin-right: 5px; */
    margin-top: 10px;

    padding: 8px 10px;
    font-size: 18px;
" placeholder="Password">

    <br>
        <button style="
                width: 324px;
                margin-top: 10px;
                border-radius: 0px;      clear: both;      
                padding: 8px 10px;      border: none;      background-color: #3FC66F;      

                font-size: 20px;      color: #fff;
            ">Log In</button>

            </div>
        </div>
    </div>
    </body>

Answer 1

尽量不要使用br来定位textboxes

删除br并应用以下样式

#newUserBox{text-align: center;width: 300px; margin:0 auto;}

旁注：尽量不要使用内联样式

输入：文本在不同浏览器中的不同定位

1 个答案: