CSSが正しくレンダリングされない

Question

CSSでテキストエリアのスタイルを設定しようとしていますが、正しく描画されていません。ボーダーの一部が表示されません。 相続人はスクリーンショット

これは、テキストエリアの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; 
} 

そして、このテキストエリア

.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; 
    } 

そして、この下にあるボックスのCSSコードの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

あなたは同じをパディング両方の要素を設定し、どちらか4pxに5pxまたは.pheed-optionsに#pheedform textareaのパディングを変更する必要があります。

Answer 2

設定幅：10 100％+ 1px border-leftおよび1px border-rightが発生するため、0％が原因です。

width属性を完全に削除するか（display：blockだけに頼ってください）、固定の固定値を与えてください。

Answer 3

スクリーンショットとjsfiddleの外観からは、.feed-options要素がピクセルまたは2つのテキスト領域よりも幅が広いように見えますが、親よりも幅が広いために切断されている可能性があります。overflow: hidden 。

私はpadding: 5pxからpadding: 4pxに.feed-optionsにパディングを調整し、それがjsfiddleでそれを並ん：http://jsfiddle.net/blineberry/d56fY/5/

これは親要素のオーバーフローを防止します。そうでない場合は、幅を100％未満に調整するか、埋め込み/マージン/境界線を調整して、overflow: hidden要素をオーバーフローさせないようにします。