html - Css 无法正确呈现

Question

我正在尝试使用 css 设置文本区域的样式，但它无法正确呈现，部分边框未显示。这是截图

这是textarea的css代码

#pheedform textarea {
    -moz-border-top-left-radius:4px;
    -moz-border-top-right-radius:4px;
    -webkit-border-top-right-radius:4px;
    -webkit-border-top-left-radius:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border:1px solid rgba(153,153,153,1);
    border-bottom:thin;
    width:100%;
    padding:4px;
}

这是文本区域下方框的 css 代码

 .pheed-options {
        background:#EEEEEE;
        border-top:none;
        padding:5px;
        position:relative;
        top:-7px;
        width:100%;
        border:1px solid #666666;
        border-right:1px solid #666666;
    }
    .pheedOptionItem {
        padding:5px;
        border-right:solid 1px #999999;
    }

这是 html

<div class="textarea_fix">
                <textarea name="pheed" cols="50" id="pheed">
                </textarea>
                 <div class="pheed-options">
                       <span class="pheedOptionItem">
                       <a href="#" class="pheedAdd_photo">Add Photo</a>
                       </span>
                       <span class="pheedOptionItem"class="pheedOptionItem">
                       <a href="#" class="pheedPostToTwitter">Post to Twitter</a>
                       </span>
                       <span class="pheedOptionItem">
                       <a href="#" class="pheedPostToFacebook">Post to Facebook</a>
                       </span>
                       <span>
                       <a href="#" class="pheedBtn">Pheed</a>
                       </span>
                </div>
                </div>

Answer 1

设置 width:100% 是原因，因为会出现以下情况:100% + 1px border-left 和 1px border-right。

要么完全删除 width 属性(仅依赖于 display: block)，要么给它一个固定的静态值。