提交按钮跨浏览器定位

所以我想做一个2字段和提交按钮的登录框。提交按钮在每个浏览器中的位置都不相同。在Firefox中，它按预期工作，但在IE8和Safari中，竖直对齐会被搞砸。任何想法来解决这个问题？提交按钮跨浏览器定位

这里的问题的screendump：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; 



}

来源

2010-10-20 Asger

试过喂食余量：0到你的按钮？ – 2010-10-20 10:11:34

是啊，这就像我想的浏览器。 – Asger 2010-10-20 10:28:57

尝试这些

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

来源

2010-10-20 10:32:31 Myra

这个伎俩。谢谢百万myra。 – Asger 2010-10-20 11:16:32

尝试用：

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

来源

2010-10-20 10:29:00

这是迄今为止我能做的最好的表格（在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; 
}

来源

2011-08-25 11:41:05

提交按钮跨浏览器定位

回答

相关问题