你的位置:快乐忆站 \ 前端 \ 文章正文

textarea宽度的2像素bug

其实在上一个模板“xiaosong-ajax”就已经发现这个问题了,当时觉得一定是自己哪里的样式导致textarea多行文本输入框宽度比样式里设置的增加了2px,后来在写现在这个“H5C3”主题的时候也发现有这个问题,而且很巧的是,这个模板里面也是比样式里设置的增加了2px,这么巧合的事会不是是浏览器的bug,或者我自己真心哪里没注意呢?有待考证,下午花了点时间写了个例子来验证自己遇到的情况。

代码很简单,只需要一点点html+css即可,我直接贴出来吧:

<!DOCTYPE HTML>
<html lang="zn-CN">
<head>
	<meta charset="UTF-8">
	<title>textarea 宽度</title>
	<style type="text/css">
		* { padding: 0; margin: 0; }
		body { width: 1000px; margin: 10px auto; }
		textarea,input { width: 400px; border: 1px solid #ccc; }
	</style>
</head>
<body>
	<p><textarea id="demo" cols="30" rows="10">我是textarea,可是为什么一样的样式,我的宽度会比下面的多了2px呢?苦恼ing</textarea></p>
	<p><input id="demo1" type="submit" value="我是一个input,一样的样式,上面这家伙始终比我宽2px,郁闷ing"/></p>
</body>
</html>

可以看出,textarea和input的样式是一样的,那么我们来看看具体的浏览器的表现:

IE9:(注意右下角红框内)

IE9

chrome:(注意右下角红框内) 

chrome

firefox:(注意右下角红框内) 

firefox

很明显,上述3个浏览器都表现出了一个问题,textarea比input要宽,具体宽几个像素,我们看看chrome下调试工具告诉我们的:

textarea宽度

input宽度 

很明显,textarea就是比input宽2px,可是我们样式里面明明设置的是400px,textarea为啥宽度会无缘无故变成了402呢?感兴趣的可以自行查看demo

我暂定为浏览器bug,但是令人费解的是虽有浏览器都惊人的表现一致:宽度增加2px,我想有可能这不是bug,而是我自己知识面不够,哪里没注意到,但是问题究竟出在哪里呢?还望知情人士告知,不胜感激!

感谢4楼小子的分享,问题得到解决,附上解决方法:(在样式中加入如下代码:)

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing   : border-box;
	-ms-box-sizing    : border-box;
	-o-box-sizing     : border-box;
	box-sizing        : border-box;
}

上述代码可以加入到reset里面,至此2px的bug完美解决~大家可以修改后的demo

不过还是不太明白浏览器为什么要有这样的默认行为,这样宽度无缘无故的变大还是有点风险的呢!令人费解!

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 12#
    手游之家
    手游之家 Google Chrome 17.0.963.56 Windows XP 2012-03-02 16:59 回复
    谢谢分享!!!
  2. 11#
    sprityaoyao
    sprityaoyao Google Chrome 16.0.912.77 Windows 7 2012-03-01 17:22 回复
    虽然欠扁老师解决了这个问题,不过这个box-sizingIE低级的版本不认识。所以其实既然理解这个属性,何不给input多设置2px呢。
    小松
    小松 Google Chrome 17.0.963.56 Windows 8 2012-03-01 19:04 回复
    @sprityaoyao:呵呵,如果我们需要让他宽度随浏览器宽度变化而变化那就不能设定死了
  3. 10#
    sprityaoyao
    sprityaoyao Google Chrome 16.0.912.77 Windows 7 2012-03-01 16:55 回复
    建议将宽度改成百分比试试
    小松
    小松 Google Chrome 17.0.963.56 Windows 8 2012-03-01 17:15 回复
    @sprityaoyao:百分比也是一样的~
  4. 9#
    wmtimes
    wmtimes Google Chrome 17.0.963.56 Windows 7 2012-03-01 14:59 回复
    这种小问题很上会有人注意
    小松
    小松 Google Chrome 17.0.963.56 Windows 8 2012-03-01 16:11 回复
    @wmtimes:嗯,可是碰到了就要解决嘛~
  5. 8#
    随缘
    随缘 Firefox 10.0.2 Windows XP 2012-02-29 15:35 回复
    修改后的在火狐下好像还是那样
  6. 7#
    意大利电机
    意大利电机 Firefox 3.6.27 Windows XP 2012-02-29 13:58 回复
    多谢分享。
  7. 6#
    新加坡移民
    新加坡移民 Firefox 10.0.2 Windows XP 2012-02-29 11:05 回复
    谢谢博主的讲解,有点懂了
  8. 5#
    huangjun
    huangjun Maxthon 2.0 Windows XP 2012-02-26 23:51 回复
    我都没有这么多浏览器可以测试的。
    小松
    小松 Chrome Mobile 16.0.912.77 Android 4.0.3 2012-02-27 07:48 回复
    @huangjun:哈哈,你可以拥有那么多浏览器的~
  9. 4#
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 18:22 回复
    你把border都设为none之后,你就知道怎么回事了。
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 18:23 回复
    @小子:楼下的要淡定
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 18:30 回复
    @小子:让哥来告诉你,
    input的默认box-sizing
    box-sizing: border-box;
    textarea的默认box-sizing
    box-sizing: content-box;
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 19:11 回复
    @小子:那么为啥我写的没有覆盖他默认的样式呢?欠扁老师请回答
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 19:54 回复
    @小松:box-sizing啊,木有看见么
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 20:00 回复
    @小子:试验了,确实把这个改变一下就宽度一致了,您犀利了,哪里看来的?
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 20:03 回复
    @小松:是你基础不扎实好不好,什么哪里看来的。
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 20:12 回复
    @小子:我擦,这种你也能了解到???
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 20:22 回复
    @小松:都去掉border的时候,两个宽度是一样的(400px),很明显是border有木有算在真实宽度里面。
    盒子模型真的理解了么,正常的宽度width + border,应该是(402px)
    而input加了border还是原来的宽度(400px),很明显是border是内边框。
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 20:33 回复
    @小松:盒子模型没理解透彻,
    sprityaoyao
    sprityaoyao Google Chrome 16.0.912.77 Windows 7 2012-03-01 16:57 回复
    @小子:盒子模型……额,都忽略了这一点
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 19:09 回复
    @小子:我知道,textarea默认有边框,但是我设置了会覆盖默认边框的啊。。。
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 20:00 回复
    @小松:我叫你去掉,是去掉后再看两个的宽度 ===
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 20:41 回复
    @小子:去掉当然一样了
    小子
    小子 Google Chrome 19.0.1049.3 Windows 7 2012-02-26 20:42 回复
    @小松:那input和一般的盒子模型不一样没看出来?
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 21:06 回复
    @小子:木有,我只知道input默认为行内块元素...
  10. 3#
    sprityaoyao
    sprityaoyao Android Webkit  Android 2.2.1 2012-02-26 16:06 回复
    我也遇到过这样的情况,我记得是跟padding属性有关。
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 16:37 回复
    @sprityaoyao:可是我已经重置了padding为0了啊,为啥还有padding?
    sprityaoyao
    sprityaoyao Android Webkit  Android 2.2.1 2012-02-26 16:44 回复
    @小松:我确定是padding属性引起的,显示的给textarea定义padding试试
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 2012-02-26 16:51 回复
    @sprityaoyao:我给textarea设置了padding:0还是不行,你能给个例子看看不?
1 2

随机日志:

推荐日志:

彩色标签:

sitemap