南芝 - 我才12岁（飞鸟尽，良弓藏，2011，背包去旅行！） » textarea http://www.12sui.cn 南芝的前端技术学习经验 Sun, 08 Jan 2012 09:22:09 +0000 en hourly 1 http://wordpress.org/?v=3.2 关于文本域textarea的border的一些测试(续) http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e7%bb%ad/ http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e7%bb%ad/#comments Mon, 12 Nov 2007 12:12:12 +0000 南芝 http://www.12sui.cn/?p=15 本来，这篇文章是应该结束的，但是今天我又遇到了问题，大家把下边这段代码复制到本地测试一下会是什么结果：

<!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>
textarea { border-color:red; border-width:1px; width:100px; height:100px;}
</style>
</head>
<body>
<textarea></textarea>
</body>
</html>

很奇怪，它表现出来的是inset的形式，我刚开始遇到的时候也很奇怪，为什么默认的就是这样子呢？

后来问了大师，他解释说当不定义border-style的时候会默认选择inset的，但是当边框线为黑色的时候就表现的不太突出哦，大家可以自己测试一下哈，恩，又长了点见识哦。

]]> http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e7%bb%ad/feed/ 0 关于文本域textarea的border的一些测试(二) http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e4%ba%8c/ http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e4%ba%8c/#comments Fri, 12 Oct 2007 12:12:12 +0000 南芝 http://www.12sui.cn/?p=14 5.我们继续测试,当定义border:0;的时候，大家可以试下，这是确实如定义一样，在ie和ff下的border都是0的。

6.那么，我们现在可以得出一下结论，当textarea的border定义为1px solid none;的时候，ff会读不出这个none，而显示默认的边框色，当定义border为none的时候，ie将读不出它是何意义,自动调用本身的边框样式。

7.根据以上的结论我们是不是可以判定除了textarea以外的所有div的border也是这样子呢？大家可以回头自己测试一下哦，自定义一个div，然后试一下border的各种属性，看看是否和textarea有同样的效果和结论。

]]> http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e4%ba%8c/feed/ 0 关于文本域textarea的border的一些测试(一) http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e4%b8%80/ http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e4%b8%80/#comments Wed, 12 Sep 2007 12:12:12 +0000 南芝 http://www.12sui.cn/?p=17 今天在制作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并不读取，而采用默认的样式显示。

]]> http://www.12sui.cn/develop/%e5%85%b3%e4%ba%8e%e6%96%87%e6%9c%ac%e5%9f%9ftextarea%e7%9a%84border%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b5%8b%e8%af%95%e4%b8%80/feed/ 0