span{width:150px;display:block}

　　六.让固定宽度的页面居中

　　为了让页面在浏览器居中显示,需要相对定位外层p,然后把margin设置为auto.

　　#wrapper{

　　margin:auto;

　　position:relative;

　　}

　　七.图片替换技术

　　用文字总比用图片做标题好一些.文字对屏幕阅读机和SEO都是非常友好的.

　　HTML:

www.hdscwl.com

　　CSS:

　　h1{background:url(heading-image.gif)no-repeat;}

　　h1span{

　　position:absolute;

　　text-indent:-5000px;

　　}

　　你可以看到我们对标题使用了标准的

作为标签并且用css来将文本替换为图片.text-indent属性将文字推到了浏览器左边5000px处,这样对于浏览者来说就看不见了.

　　关掉css,然后看看头部会是什么样子的.

　　八.最小宽度

　　IE6另外一个bug就是它不支持min-width属性.min-width又是相当有用的,特别是对于弹性模板来说,它们有一个100%的宽度,min-width可以告诉浏览器何时就不要再压缩宽度了.

　　除IE6以外所有的浏览器你只需要一个min-width:Xpx;例如:

　　.container{

　　min-width:300px;

　　}

　　为了让他在IE6下工作,我们需要一些额外的工作.开始的时候我们需要创建两个p,一个包含另一个:

　　

　　Content

　　

　　然后你需要定义外层p的min-width属性

　　.container{

　　min-width:300px;

　　}

　　这时该是IEhack大显身手的时候了.你需要包含如下的代码:

　　*html.container{

　　border-right:300pxsolid#FFF;

　　}

　　*html.holder{

　　display:inline-block;

　　position:relative;

　　margin-right:-300px;

　　}

　　Asthebrowserwindowisresizedtheouterpwidthreducestosuituntilitshrinkstotheborderwidth,atwhichpointitwillnotshrinkanyfurther.Theholderpfollowssuitandalsostopsshrinking.Theouterpborderwidthbecomestheminimumwidthoftheinnerp.

　　九.隐藏水平滚动条

　　为了避免出现水平滚动条,在body里加入overflow-x:hidden.

　　body{overflow-x:hidden;}

　　当你决定使用一个比浏览器窗口大的图片或者flash时,这个技巧将非常有用。至于在现实的运用中，我们也见到了没有hack的网页，而且是各个浏览器都兼容，我们不仅要问了，是怎么回事呢，其实说的简单些，那是因为经验丰富了，其实说的小一点，每个浏览器都有不同的默认标准，我们只要把这些掌握了，也就把兼容问题解决了，这当然需要不断的实践和多年的工作经验才能得出来。