Question

我正在为它编写基本表单模板和样式表，但我无法收到错误。使用独特的＆＃34; double＆＃34;边框属性在样式形式时将边框推出包含元素并破坏外观。

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>

Answer 1

将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

Answer 2

尝试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

双边界属性导致错误

2 个答案: