关于文本域textarea的border的一些测试(一)
今天在制作dz风格的时候，发现了一个奇怪的现象，就是当我在后台定义外表格背景颜色为none的时候，在前台的发表新帖里边的所见即所得模式中的光标默认的跑到了中间。一开始并不知道是为什么，还以为js的问题呢。找了半天都没有结果，后来我把所有的模板文件恢复默认。竟然还是没有恢复正常，经人提醒。开始怀疑是后台界面风格里边定义的问题，挨个测试就测到这里来了。我很纳闷，为什么定义了none就会有问题了呢？在css文件内查找到了使用这个地方颜色代码的地方，里边有个border使用的颜色是这里，就是：border:1px solid none;，就这个定义造成了光标居中，以及背景无法控制的问题。为了使这个问题重现，我在底下做了测试，大家也可以一起来研究一下。
这个是布局,为了方便就把css嵌进去了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#hehe { width:500px; height:300px;}
textarea { width:300px; height:200px; border:1px solid #000;}
</style>
</head>
<body>
<div id="hehe">
<textarea>
</textarea>
</div>
</body>
</html>
1.暂时我们将textarea的border定义的正常一点，大家应该很容易猜到现在的效果把,在ff和ie下都是正常的。
2.现在我们需要textarea的border的属性值修改为textarea { border:1px solid none;}，大家试一下看看。大家可以看到，在ie下边框已经消失了，但是在ff下并没有消失，但是边框颜色变成了#7F9DB9(这是为什么呢?)，光标位置都没有变化。
3.现在我们不那么写，直接将border设置为none,即border:none;，大家试一下现在是什么效果？在ie下出现了边框,颜色为#7F9DB9，而在ff下没有了边框,大家注意到ie的这个颜色跟刚才ff下那个边框颜色是一样的哦，这又是为什么呢？
4.那么现在我们将border这个属性去掉，大家试一下没有border定义的textarea是什么样子的？现在大家看到ie和ff下都有了边框，而且颜色都为#7F9DB9，那么我们明白,在默认的没有定义的情况下他们的现状，也就是说，当做2的定义的时候，ff并不读取这个值，采用默认的样式，当做3的定义时，ie并不读取，而采用默认的样式显示。
标签： textarea
这篇文章发布于 2007年09月12日，星期三，20:12，归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
