Question

所以我正在尝试创建一个包含2个字段和提交按钮的登录框。提交按钮在每个浏览器中的位置都不同。在Firefox中它按预期工作，但在IE8和Safari中，垂直对齐被搞砸了。有什么想法来解决这个问题吗？

以下是该问题的一个重点：http://gefuhlkunder.dk/bla.jpg

    <form action="">
                <div>
                     <input type="text" name="brugernavn" class="login-input" value="Brugernavn" />
                     <input type="text" name="brugernavn" class="login-input" value="password"  />

                     <input class="login-submit" type="submit" value="login" />
             </div>
             </form>

.login-input{

        border:1px solid #bebebe;
        font-family: 'FlamaBook', sans-serif;
        font-size:10px;
        letter-spacing:-0.4px;
        text-transform:uppercase;
        color:#464646;
        font-size-adjust: 0.5;

        height:18px;
        line-height:18px;
        text-align:center;
        width:69px;
        margin:0 3px 0  0;

}


.login-submit{


        border:1px solid #bebebe;
        font-family: 'FlamaBook', sans-serif;
        font-size:10px;
        letter-spacing:-0.4px;
        text-transform:uppercase;
        color:#464646;
        font-size-adjust: 0.5;

        text-align:left;
        position:absolute;
        padding: 0px 0px 0 3px;
        width:59px;
        height:20px;
        line-height:20px;
        background:#fff url(images/submit_bg.png);
        cursor:pointer;



}

Answer 1

试试这些

.login {
    font-family: sans-serif;
    font-size:10px;
    border:1px solid #bebebe;
    text-transform:uppercase;
    text-align:center;
    color:#464646;
    cursor:pointer;
    padding:3px;
    margin-right:3px;
}
.login-submit {
    margin-top:3px; 
}

和

<form action="">
<div>
    <input type="text" name="brugernavn" class="login login-input" value="Brugernavn" />
    <input type="text" name="brugernavn" class="login login-input" value="password"  />

    <input class="login login-submit" type="submit" value="login" />
</div>

Answer 2

尝试：

height:18px;
margin: 3px 0 0;

Answer 3

这是我到目前为止使用表格所做的最好的（在Firefox，Chrome和IE8上查看）。但是，您可以注意到IE8中的一个小差异。

如果您使用此代码，则需要在按钮中放置背景图像。任何文字都会弄乱布局。不敢相信即使尝试做这么简单的事情也是如此棘手。

<table border="0" cellpadding="0" cellspacing="0"> 
    <tr>
        <td class="firstTd">
            <div class="styleOne">
                <input id="searchEntry" value="" title="Search" size="41" type="text" name="searchEntry"/>
            </div>
        </td>
        <td>
            <div>
                <button value="Search" class="buttonStyle" type="submit" name="myButton">
                    <span></span> 
                </button>
            </div>
        </td>
    </tr>
</table>

table {
    width: 342px;
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    position: relative;
    border-bottom: 1px solid transparent;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
td, th {
    display: table-cell;
    vertical-align: inherit;
}
td.firstTd{
    width: 281px;
}
div.styleOne {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top-color: #c0c0c0;
    height: 27px;
    display: block;
    width: 281px;
}
input#searchEntry{
    font-size: 20px;
    width: 278px;
}
button.buttonStyle{
    padding: 12px 22px;
}

提交按钮跨浏览器定位

3 个答案: