来客轩

扩展阅读：《Roundup on Parallel Connections》

来源：planabc.net

IE6，7并不支持CSS3的属性，IE8也不能很好的支持CSS3。如何让ie支持border-radius (rounded), box-shadow ( shadow), text-shadow等这些属性呢？这里介绍一个通过htc脚本实现这些属性的方法。

首先下载ie-css3.htc脚本。

然后在css中加入 behavior: url(ie-css3.htc);

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

本站的圆角就是通过这个方法实现的。

注意： behavior: url(ie-css3.htc) 中的ie-css3.htc地址用绝对路径或者直接传到网站的根目录下面，要不然可能会看不到效果的。

官方介绍：CSS3 support for Internet Explorer 6, 7, and 8

另有一篇跨浏览器实现圆角的文章，有兴趣可以看一下，原理相同。Curved corner (border-radius) cross browser

好书推荐

查看全部推荐书籍

CSS Hack浏览器兼容一览表

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：

1、如果表单里有一个type=”submit”的按钮，回车键生效。

2、如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。

3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FF默认为type=submit。

4、其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FF下会响应回车键，在IE下不响应。

5、type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。

实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。

基本原理：

没有什么技术含量，主要是利用背景色和边框色来渲染每一个像素点，加上绝对定位，就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化，然后用PS放大图片，将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。

查看代码

CSS图片垂直居中方法整理集合

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
	width:500px;
	height:500px;
	border:1px solid #ccc;
	overflow:hidden;
	position:relative;
	display:table-cell;
	text-align:center;
	vertical-align:middle
	}
div p {
	position:static;
	+position:absolute;
	top:50%
	}
img {
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	width:276px;
	height:110px
	}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</pre class="html">

<strong>标准浏览器下另类方法:</strong>

<pre class="html">
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
	margin:0;padding:0
	}
div {
	width:500px;
	height:500px;
	line-height:500px;
	border:1px solid #ccc;
	overflow:hidden;
	position:relative;
	text-align:center;
	margin:auto
	}
div p {
	position:static;
	+position:absolute;
	top:50%
	}
img {
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	width:276px;
	height:110px;
	vertical-align:middle
	}
p:after {
	content:".";font-size:1px;
	visibility:hidden
	}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>

查看全部

鼠标移到input后GOOGLE的图片会消失，鼠标移走后又显示

演示：http://wlog.com.cn/code/javascript/google-input/google-input.html

<style type="text/css">
.input{ background:url(http://wlog.com.cn/code/javascript/google-input/google_custom_search_watermark.gif) no-repeat}
input {margin:0; padding:0;}
</style>
<script type="text/javascript">
window.onload = function (){
	var oInput = document.getElementById("textfield");

	var bf=0
	oInput.onmouseout = function(){
		if (this.value==''&& bf==0)this.className='input';
	}
	oInput.onblur= function(){bf=0;if (this.value=='')this.className='input';}
	oInput.onfocus= function(){bf=1;this.className='';}
}
</script>
<input type="text" name="textfield" id="textfield"  class="input" />