1

固定幅のボックスにテキスト領域があります。ブラウザの互換性に苦労しています。Chrome と IE で幅を修正すると、Firefox の右側に適切な間隔が表示されません。列数を減らすと Firefox の問題は修正されますが、IE/Chrome では右側により多くのスペースが表示されます。

すべてのブラウザでテキストエリアを正確に中央に配置する必要があります。出来ますか？

デモ コードは、JSFiddleと以下で提供されています。

HTML

<div id='container'>
    <div class='box-title'>
        Title
    </div>
    <div class='box-cont'>
        This is the contents of content area.
        No limit for these contents.
        Width will be fixed but height may be infinite long
        depending on the contents
        <textarea rows='3' cols='35'></textarea>
    </div>
</div>

CSS

#container{
    width:312px;
    border:1px #666 solid;
    margin:5px;
    padding:5px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.box-title{
    border-top-left-radius: 5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border:1px #F66 solid;
    border-bottom:0;
    background-color:#FAA;
    padding:2px 5px;
    margin:0;
}
.box-cont{
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border:1px #F66 solid;
    background-color:#FFF;
    padding:2px 5px;
    margin:0;
}
4

1 に答える 1

4

こんにちは、あなたのCSStextareaにこのように与えます

.box-cont textarea{
width:100%;
    height:40px;
    resize:none;
}

デモ

于 2012-09-18T07:44:26.457 に答える