Firefox中的文本区域宽度问题答案

【问题标题】：Textarea width issue in firefoxFirefox中的文本区域宽度问题
【发布时间】：2012-09-18 15:51:09
【问题描述】：

我在一个固定宽度的框中有一个文本区域。我正在为浏览器兼容性而苦苦挣扎。当我在 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;
}

【问题讨论】：

这里看起来非常好（@ FF 15.0.1）
@c_kick 我还在 Windows 7 上使用 Firefox 15.0.1、IE9、Chrome 21 进行比较。对我来说，它在 Chrome 和 IE 中完美居中，但在 Firefox 中，它跨越了预期的右边界约 2-3 像素。我也在不同的机器上测试过，但同样的问题。

标签： html css cross-browser

【解决方案1】：

你好现在给你的textarea中的css像这样

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

Demo

【讨论】：

但是，为什么？他为什么要这样做？你做了什么改变，它是如何运作的？
@KyleSevenoaks 我的东西 textarea 对浏览器中的每一个都有一些缺陷，所以我根据父级定义这个宽度......
谢谢。是的，以上样式解决了问题。