Css不能正確渲染

我試圖使用css設置textarea的樣式，但它不能正確渲染，邊框的一部分不顯示。繼承人截圖 Screenshot Css不能正確渲染

這是textarea的

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

下面這個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>

來源

2011-10-28 MrFoh

將代碼粘貼到jsfiddle plz（： –

小提琴：http://jsfiddle.net/d56fY/ –

@bitsMix感謝您的提示 – MrFoh

您應該設置兩個元素填充相同，或者將#pheedform textarea s填充更改爲5px或.pheed-options至4px。

來源

2011-10-28 17:19:19 scumah

設置寬度：10 0％是原因，因爲會出現以下情況：100％+ 1px左邊界和1px邊界右邊。

要麼完全刪除width屬性（只要依靠display：block）或給它一個固定的靜態值。

來源

2011-10-28 17:11:59 Joshua

從你的截圖和jsfiddle的外觀看，它看起來像是.feed-options元素是比textarea更寬的一個像素或兩個像素，並且可能被截斷的寬度比其父元素寬，並且父元素具有overflow: hidden 。

我調整上.feed-options填充從padding: 5px到padding: 4px和它在內襯的jsfiddle它：http://jsfiddle.net/blineberry/d56fY/5/

這可以防止其溢出的父元素。如果不是，則將寬度調整爲小於100％或繼續調整填充/邊距/邊框，直到其不再溢出overflow: hidden元素。

來源

2011-10-28 17:19:28 Brent

Css不能正確渲染

回答

相關問題