導致錯誤的雙邊框屬性

我正在爲它編寫一個基本表單模板和一個樣式表，我不能發出我收到的錯誤。當樣式形成時使用唯一的「雙」邊框屬性將邊框推出包含元素並破壞外觀。導致錯誤的雙邊框屬性

的CSS：

form { 
    margin:0; 
    padding:0; 
    } 

fieldset { 
    font: normal 12px "Lucida Grande", Verdana, san-serif; 
    margin:0 0 10px 0; 
    padding:5px; 
    border:1px solid #333; 
    } 

legend { 
    background-color: #DDD; 
    margin:0; 
    padding:5px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#FFF #AAA #666 #FFF; 
    } 

#name, #email, #message, #subject { 
    width:100%; 
    } 

label { 
    font-weight:bold; 
    } 

input, textarea { 
    border:3px double #333; 
    }

XHTML標記：

<html> 
    <head> 
    <title>Chapter 9: Forms</title> 
    <link rel="stylesheet" type="text/css" href="css/screen/forms_table.css" /> 
    </head> 

    <body> 
     <form action="" method="post" id="enquiryform"> 
      <fieldset> 
       <legend>Enquiry Form</legend> 
       <table cellspacing="3" cellpadding="3" border="1"> 
        <tr> 
         <td colspan="2">Fields market * are complusory.</td> 
       </tr> 
       <tr> 
        <td><label for="subject">Subject *</label></td> 
        <td><select name="subject" id="subject" tabindex="1"> 
         <option value="">Select</option> 
         <option value="Option 1">Option 1</option> 
         <option value="Option 2">Option 2</option> 
        </select></td> 
       </tr> 
       <tr> 
        <td><label for="name">Name *</label></td> 
        <td><input type="text" name="name" id="name" tabindex="2" /></td> 
       </tr> 
       <tr> 
        <td><label for="email">Email *</label></td> 
        <td><input type="text" name="email" id="email" tabindex="3" /></td> 
       </tr> 
       <tr> 
        <td colspan="2"><label for="message">Message or enquiry below</label></td> 
       </tr> 
       <tr> 
        <td colspan="2"><textarea name="message" id="message" 
        rows="11" cols="30" tabindex="4"></textarea></td> 
       </tr> 
       <tr> 
        <td><label for="updates">I would like to receive updates: </label></td> 
        <td><input type="checkbox" name="updates" id="updates" value="n" tabindex="5" /></td> 
       </tr> 
      </table> 
     </fieldset> 
     <input type=submit value="Send this enquiry" /> 
    </form>

來源

2014-04-01 Isaac Crosswell

添加box-sizing:border-box的規則您的輸入元素：

input, textarea { 
    border:3px double #333; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing:border-box; 
}

jsFiddle example

來源

2014-04-01 17:18:48 j08691

媽快+1 :) – James

嘗試box-sizing風格input和textarea

inpinput, textarea{ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox*/ 
    box-sizing: border-box; 
}

例如fiddle

來源

2014-04-01 17:19:32 James

這工作謝謝，你能解釋一下你做了什麼嗎？我是新來的HTML/CSS。 –

當你使用'box-sizing：border-box'時，邊框也包含在元素的寬度中。默認情況下，應用元素的寬度和應用邊框時，邊框將被添加到寬度。但在這種情況下，邊框也將被包含到指定的寬度 – James

導致錯誤的雙邊框屬性

回答

相關問題