HTML文本字段和按鈕看起來比指定的要大

我在我自己的項目中實現了UI設計，看起來我有CSS問題，時間很長。HTML文本字段和按鈕看起來比指定的要大

據我知道的輸入類型，我指定樣式：在路上CSS文字，按鈕接受：

body input[type=text]{ 
    border:1px solid #208278; 
    height:24px; 
    padding-left: 5px; 
} 
body button{ 
    background-color: #279A8F; 
    border:0px; 
    color:white; 
    height:24px; 
} 
body input[type=password]{ 
    border:1px solid #208278; 
    height:24px; 
    padding-left: 5px; 
} 
body input[type=submit], input[type=button]{ 
    background-color: #279A8F; 
    border:0px; 
    color:white; 
    height:24px; 
}

在登錄頁面，領域出現的高度，哪裏是24px的因爲在我登錄後，我看到所有字段都更大，高度超過24像素。我沒有任何線索。有一點是登錄後，字段出現在有一些填充和邊距的容器中，但我沒有看到任何理由如何影響字段。這個問題一直讓我發瘋，有人可以提供一些見解嗎？

在表單字段被放置在容器低於：

#container{ 
    width:1100px; 
    margin: 0 auto; 
} 
#leftbar{ 
    float:left; 
    width:200px; 
    font-size:13px; 
    background-color:#237971; 
    color:white; 
    padding:4px; 
} 
#rightbar{ 
    float:right; 
    width:200px; 
    font-size: 13px; 
    background-color:#237971; 
    color:white; 
    padding:4px; 
} 
#middlebar{ 
    padding:5px; 
    margin-left:3px; 
    margin-right:3px; 
    float:left; 
    width:660px; 
    border:1px solid black; 
}

日誌

HTML代碼在頁：

<html> 
<head> 
    <link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>" media="all"> 
    <title> 
     My Page 
    </title> 

</head> 
<body> 
<div id=header> 
    &nbsp;&nbsp;&nbsp;Welcome 
</div> 
<?php echo validation_errors(); ?> 


<?php echo form_open('login/verify'); ?> 
<table> 
    <tr> 
     <td align="right"><label for="email">E-Mail:</label></td> 
     <td align="left"><input type="text" name="email" id="email" value="<?=set_value('email')?>"></td> 
    </tr> 
    <tr> 
     <td align="right"><label for="password">Password:</label></td> 
     <td align="left"><input type="password" name="password" id="password"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td align="left"><input type="submit" name="submit" value="Login"></td> 
    </tr> 
</table> 
</form> 
<br/> 
<a href="<?php echo base_url();?>signup/signup">Sign up</a> for a new account<br/> 
</body> 

</html>

HTML構件的區域的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="<?php echo base_url('js/jquery-1.9.1.js'); ?>"></script> 
    <script src="<?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?>"></script> 
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?>"> 



    </script> 
    <link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>"> 
    <title>Welcome</title> 
</head> 
<body> 
<div id=container> 
    <div id=header> 
     &nbsp;&nbsp;&nbsp;Members area 
    </div> 


    <div id="leftbar"> 
     <div class=content><a href="<?php echo base_url();?>user/home/logout">Logout</a></div></div> 
    <div id="rightcontainer"> 
     <div id="middlebar"> 
      <?php echo validation_errors();?> 
      <?php echo form_open_multipart('home/create/validate'); ?> 
      <table> 
       <tr> 
        <td align="right"><label for="fullname">full Name:</label></td> 
        <td align="left"><input type="text" name="fullname"></td> 
       </tr> 


<tr> 
        <td></td> 
        <td><input type="submit" name="finish" value="Finish"></td> 
       </tr> 
      </table> 

     </div> 
     <div id="rightbar"></div> 
    </div> 
</div> 

</body> 

</html>

成員區域中的所有字段都顯示爲大於24像素。 :(請幫我

非常感謝你提前

來源

2013-04-15 Sasanka Panguluri

一個[jsFiddle]（http://jsfiddle.net）例子會很棒！:)沒有HTML我們就無法繼續。 :) –

在所有的輸入選擇器中，「body」是否真的需要？ – cimmanon

它是可選的嗎？我猜所有的身體標籤內的字段共享該屬性？如果我不正確，請糾正我。 –

想通了主要的故障，我沒有在我的HTML代碼下面的語句標準化登錄頁面：！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

來源

2013-04-20 16:06:52

HTML文本字段和按鈕看起來比指定的要大

回答

相關問題