Question

我试图用css设置textarea样式但是它没有正确渲染，边框的一部分没有显示。继承人截图 Screenshot

这是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;
}

这是textarea

下方框的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

设置宽度：100％是原因，因为出现以下情况：100％+ 1px border-left和1px border-right。

完全删除width属性（仅依赖于display：block）或给它一个固定的静态值。

Answer 2

您应该将两个元素填充设置为相同，将#pheedform textarea填充更改为5px或.pheed-options更改为4px。

Answer 3

从屏幕截图和jsfiddle的外观来看，.feed-options元素看起来像是一个比textarea更宽的像素，并且可能因宽度比其父元素宽而且父元素更宽元素有overflow: hidden。

我将.feed-options上的填充从padding: 5px调整为padding: 4px，并将其排列在jsfiddle中：http://jsfiddle.net/blineberry/d56fY/5/

这可以防止它溢出父元素。如果不是，请将宽度调整为小于100％，或者继续调整填充/边距/边框，直到它不再溢出overflow: hidden元素。

Css无法正确渲染

3 个答案: