something about button
今天在整理优化的时候，发现很多地方都用了同样的button按钮，但是大小不一，但是在ie下不能很好的自适宽度，所以想做的统一一点。后来发现除了在Opera下表现的比较完美外，其他浏览器下button都默认的保留的有一定的边缘，不晓得是为什么，后来就不得已的在button中套了两个span，又回到了优化前的结构，其实做的仅仅是让它在ie下自适应。
HTML Code：
<button class="btn"><span><span>这是按钮哈</span></span></button>
这样子显得很冗余，但是没办法，可能你觉得这样子做不对，那么如果我们把span放到外边的话，那么块元素的宽度我们就做不了主了，暂且不管，先看看这样子达到的效果吧。
CSS Code：
.btn { border:none; padding:0; margin:0; background:none; cursor:pointer; text-align:center;}
.btn span { display:block; font-size:14px; font-weight:600; margin:0; padding:0; color:#fff; background:url(btn.gif) 0 0 no-repeat; min-width:100px; white-space:nowrap; _width:100px;}
.btn span span { background-position:right -30px; height:20px; display:block; padding:5px 10px;}
里边套了两层的span，并设定了最小宽度为100px（其实带上padding应该是120px），而ie6下解决不支持min-width的方法很简单，就是加上一个white-space。如下图所示效果：
但是这么做其实也并没有带来什么便利，感觉一层套一层，怪怪的，到最后还是选择了固定宽度，制作几种宽度的btn图标来做，这样子省去了很多麻烦。
那么button里边套块元素是不是合理呢？来看看W3C对button的介绍：
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.
Visual user agents may render BUTTON buttons with relief and an up/down motion when clicked, while they may render INPUT buttons as “flat” images.
It is illegal to associate an image map with an IMG that appears as the contents of a BUTTON element.
其实并不怎么喜欢button，它有好多缺点，但是它还是有很多优势，我自己在使用的时候一般能使用input就使用input了。W3C并没有明白的告诉我们button是什么，它是否可以包含块元素，但是它有这么一句话：the BUTTON element may have content，其实我就可以以为它是可以包含的。那么button到底是块元素还是内联元素呢？首先，它可以设置宽度、高度，我觉得它应该是块元素，但是几个button放在一起，它并不会换行，它又显得是内联元素。百度了一下，总结了一个关于HTML元素分类的东西，有兴趣的话可以看下：http://www.csser.name/viewnews-962，在这里button被指出是可变元素，也就是说可块、可内联。那么，如果我们把上个例子中的按钮再写出来一个，那么它们是并排的还是分行的呢？如下图所示：
虽然他们里边的元素是块元素，但是它们依然并排而立，但是如果我们给button加一个display:block;的属性的话，那么它们肯定是换行的啦。也就是说，button默认表现的是内联元素，但是其实他的内在拥有块元素的大多数特性。
这里是demo：http://www.12sui.cn/test/18
这篇文章发布于 2009年03月5日，星期四，23:08，归类于 CSS, HTML。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
