Question

我在固定宽度的框中有一个文本区域。我正在努力与浏览器兼容。当我在chrome＆amp;中修复宽度时IE，Firefox在右侧没有显示正确的间距。减少cols修复了Firefox上的问题，但在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;
}

Answer 1

嗨现在在你的textarea中提供 css 就像这样

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

的 Demo 的

firefox中的Textarea宽度问题

1 个答案: