css要素の高さが同じではありません

Question

すべての要素の高さを "23px"と指定しましたが、添付画像でわかるように、 "23px"未満の要素がいくつかあります。

<style type="text/css"> 
     #login_main { display: inline; list-style-type:none; } 
     #login_main_ul { margin: 0px; padding: 0px; list-style: none; height=23px; float: right; vertical-align: middle;} 
     .login_main_item {border: 1px solid red; float: left;} 
    </style> 


    <form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" style="margin:0px;"> 
    <input type="hidden" name="url" value="<?=$outlogin_url?>"> 
    <div id="login_main" style="width:100%; "> 
     <ul id="login_main_ul"> 
     <li class="login_main_item" style="width:35px; height:23px;"><img src="<?=$outlogin_skin_path?>/img/login_id.gif" width="35" height="23"></li> 
     <li class="login_main_item" style="width:106px; height:23px;" colspan="2" align="center"><input name="mb_id" type="text" class=ed size="12" maxlength="20" required itemname="ID" value='ID' onMouseOver='chkReset(this.form);' onFocus='chkReset(this.form);'></li> 
      <li class="login_main_item" width="35" height="23"><img src="<?=$outlogin_skin_path?>/img/login_pw.gif" width="35" height="23"></li> 
      <li class="login_main_item" id=pw1 width="106" height="23" colspan="2" align="center"><input type="text" class=ed size="12" maxlength="20" required itemname="PassWord" value='PassWord' onMouseOver='chkReset(this.form);' onfocus='chkReset(this.form);'></li> 
      <li class="login_main_item" id=pw2 style='display:none;' width="106" height="23" colspan="2" align="center"><input name="mb_password" id="outlogin_mb_password" type="password" class=ed size="12" maxlength="20" itemname="PassWord" onMouseOver='chkReset(this.form);' onfocus='chkReset(this.form);' onKeyPress="check_capslock(event, 'outlogin_mb_password');"></li> 
      <li class="login_main_item" width="24" height="23" rowspan="2" align="center"><input type="image" src="<?=$outlogin_skin_path?>/img/login_button.gif" width="24" height="23"></li> 
      <li class="login_main_item" ><input type="checkbox" name="auto_login" value="1" onclick="if (this.checked) { if (confirm('auto login?')) { this.checked = true; } else { this.checked = false; } }"></li> 
      <li class="login_main_item" style="padding-left:5px;"><img src="<?=$outlogin_skin_path?>/img/login_auto.gif" width="35" height="23"></li> 
      <li class="login_main_item" style=" padding:0 0 0 2px;"> 
       <!-- <a href="javascript:win_password_forget();"><img src="<?=$outlogin_skin_path?>/img/login_pw_find_button.gif" width="90" height="23" border="0"></a> --> 
       <a href="javascript:win_password_lost();"><img src="<?=$outlogin_skin_path?>/img/login_pw_find_button.gif" width="90" height="23" border="0"></a> 
     </li> 
     <li class="login_main_item" style=" padding:0 0 0 2px;"> 
      <a href="<?=$g4[bbs_path]?>/register.php"><img src="<?=$outlogin_skin_path?>/img/login_join_button.gif" width="69" height="23" border="0"></a> 
      </li> 
     </ul> 
    </div> 
    </form>   

画像リンク - http://i.imgur.com/YJxBH.jpg

私が間違って何お知らせください。

ありがとうございます。

Answer 1

はheight: 23px;代わりにheight=23px;

また要素が境界を有する場合には、それは同様に計算されることに注意してください。

更新：

また、あなたがstyle="height:23px"を使用して、他height="23"でいるいくつかでは#login_main_ul li

#login_main { 
     display: inline; 
     list-style-type:none; 
     } 
#login_main_ul li { 
     margin: 0px; 
     padding: 0px; 
     list-style: none; 
     height:23px; 
     float: right; 
     vertical-align: middle; 
     } 
.login_main_item { 
     border: 1px solid red; 
     float: left; 
     } 

Answer 2

に#login_main_ulを変更することがあります。それらをすべて使用するように切り替えてみてくださいスタイル

Answer 3

マークアップから幅と高さの属性を削除し、CSSのみで追加してください。

また、あなたが使用する必要があるCSS内部 '：' ではなく '='