1

我在固定宽度的框中有一个文本区域。我正在为浏览器兼容性而苦苦挣扎。当我在 chrome 和 IE 中修复宽度时，Firefox 不会在右侧显示正确的间距。减少 Firefox 上的 cols 修复问题，但在 IE/Chrome 上，它向右侧显示更多空间。

我需要将 textarea 放在所有浏览器的中心。是否可以？

演示代码在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 回答