分类存档: xhtml+css

firefox7 支持text-overflow: ellipsis

作者: luo 日期: 2011年10月17日 1 条评论

firefox7 发布后正式支持 text-overflow: ellipsis （…）以后再写省略号效果就省事多了，具体代码如下：


<div style="width:200px;height:25px;line-height:25px;overflow:hidden;border:1px solid #333;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-family:'宋体';">irefox 7正式支持 text-overflow: ellipsis终于赶上IE6的脚步</div>

Chrome 中文版字体小于12px的解决方法

作者: luo 日期: 2011年07月11日没有评论

在中文版的chrome里，定义了小于12px的字体依然显示为12px.
解决办法:webkit的私有属性 html{-webkit-text-size-adjust:none;}
在此记录一下。

Yslow优化建议

作者: luo 日期: 2011年07月8日没有评论

转发小崔的一篇文章，很实用的优化建议：

之前介绍过一次 Yslow ，最近又遇到了网站优化方面的问题，复习一遍：

减少HTTP请求次数
合并图片、CSS、JS，改进首次访问用户等待时间。
使用CDN
就近缓存==>智能路由==>负载均衡==>WSA全站动态加速
避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试
为文件头指定Expires
使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
使用gzip压缩内容
压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。旧文章
把CSS放到顶部
把JS放到底部
防止js加载对之后资源造成阻塞。
避免使用CSS表达式
将CSS和JS放到外部文件中
目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。
权衡DNS查找次数
减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
精简CSS和JS
避免跳转
同域：注意避免反斜杠 “/” 的跳转；
跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）
删除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和 Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载
可缓存的AJAX
“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
减少DOM元素数量
是否存在一个是更贴切的标签可以使用？人生不仅仅是DIV+CSS
避免404
有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
减少Cookie的大小
使用无cookie的域
比如图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。
不要使用滤镜
png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg
不要在HTML中缩放图片
缩小favicon.ico并缓存

原文地址：http://uicss.cn/yslow/

关于前端页面优化的分享

作者: luo 日期: 2011年07月1日评论关闭

在这里跟大家分享一些我在做页面时所用到的优化方法，前端页面的优化在我们这个层面主要可以从 image html css 这三部分来入手。

Image:
页面中所用到的背景图和图标可根据具体的颜色值的多少来决定使用什么样的图片格式，我一般都是压缩成gif 和png8 格式的。gif比较常用，文件量也比较小。Png8大家也都知道属于无损压缩，文件量有时比gif还要小，所以这两种格式可以根据具体情况来选择。还有jpg的格式，一般都是在切占位图的时候才用到，优化品质到60%-80% 左右即可，这种图最后是要删除的，所以也不是大重要。为了减少htttp的请求数，可以合理的对背景图和图标进行整合。

Html:
在编写html结构之前我都是先把整个页面的布局风格先看一下，在脑子里有个大概的框架，然后再把页面的每个区域进行模块化，找出相同结构的模块。在编写html结构时最重要是要了解页面中每个模块内所表达的内容和意思，这样才能真正的做到标签的语义化。标签嵌套时要合理，不要添加太多没必要的嵌套。

Css:
Css这块主要是在可重用性，继承，定位来做的优化，可重用性：大家都知道，就是在页面中相当结构的模块都可以应用同一个样式，在写css时尽量的做到这一点。继承：在样式继承时层级不要太深，浏览器在解析时是从右向左解析，如果继承太深会影响浏览器的渲染速度。定位：这块主要是指的绝对定位，一般在页面中大的框架上面尽量少用绝对定位来定义，这也会影响性能。最后还有一些属性的缩写，禁用css表达式，文件的压缩，这些都可以提升浏览器的渲染速度。

以上是我自己在平时做页面时所用到的方法，也有很多的不足，希望能对大家有一些帮助，如有更好的优化方案和建议欢迎一起交流学习。

contentEditable属性详解

作者: luo 日期: 2011年05月24日没有评论

contentEditable　html中的一个属性。设置html的contentEditable=‘true’时，即可开启该元素的编辑模式。　　Html中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写．我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．　　如果想要整个网页可编辑，请在body标签内设置contentEditable 　　contentEditable虽不是W3C标准．经过我测试在IE6中运行正常．　　在IE8下设置表格可写不支持，其他元素没有问题．在FireFox运行一切正常．谷歌浏览器运行一切正常

使用方法

html中 <p contentEditable=true>; 　　js 中 document.all(“tjtxt”).contentEditable =true;

应用

前段UI的美化，表单元素通过css样式不一定能达成设计师的要求，通过开启 div p span等元素的contentEditable，来实现表单元素的功能（需要js搭配）。

背景实现带效果的透明数字

作者: luo 日期: 2011年05月12日没有评论

用img加背景的方法实现带效果的透明数字，兼容所有浏览器，并解决了ie6下不支持透明的bug，具体代码如下：

<!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=utf-8" />
<title>以显示带效果的文字为例，解决png图片在ie6下不透明的bug</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none; color:#333;} a:hover{text-decoration:underline; color:#F00;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clearfix:after{ content:"\020"; display:block; height:0; clear:both; visibility:hidden;} .clearfix{ zoom:1;}

body{ background:#333}
.num{ width:200px; height:36px; border:2px solid #FFF; text-align:left; padding:10px; margin:0 auto}
.num span{ width:25px; height:36px; display:block; float:left; overflow:hidden}
.num span img{ width:25px; height:474px; background:url(img/sp_num.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/sp_num.png')}
.num .n0 img{margin-top:0}
.num .n1 img{ margin-top:-46px;}
.num .n1 img{margin-top:-46px}
.num .n2 img{margin-top:-92px}
.num .n3 img{margin-top:-138px}
.num .n4 img{margin-top:-184px}
.num .n5 img{margin-top:-230px}
.num .n6 img{margin-top:-276px}
.num .n7 img{margin-top:-322px}
.num .n8 img{margin-top:-368px}
.num .n9 img{margin-top:-414px}
.num .comma img{margin-top:-460px}
.num .comma{position:relative;bottom:-27px;width:8px;height:14px}
</style>
</head>
<body>
<div class="num">
	<span class="n9"><img src="img/img_blank.gif" width="1" height="1" alt="9" /></span>
	<span class="n2"><img src="img/img_blank.gif" width="1" height="1" alt="2" /></span>
	<span class="n3"><img src="img/img_blank.gif" width="1" height="1" alt="3" /></span>
	<span class="comma"><img src="img/img_blank.gif" width="1" height="1" alt="," /></span>
	<span class="n0"><img src="img/img_blank.gif" width="1" height="1" alt="0" /></span>
	<span class="n0"><img src="img/img_blank.gif" width="1" height="1" alt="0" /></span>
	<span class="n0"><img src="img/img_blank.gif" width="1" height="1" alt="0" /></span>
</div>
<!--

实现原理：
1、为保证图片质量准备一张png的数字图片；
2、切一张宽高都为1像素的图片；
3、以此例分析在每个span内先放置刚才切的1像素的图片，给每个span添加class【0-9】和【逗号（comma）】；
4、css内为所有span添加样式，注：宽和高分别是每个数字的尺寸设置溢出隐藏；
5、css设置span下所有的img元素的宽和高为png图片的尺寸，并为此图设置背景（sp_num.png）；
6、最后设置每个class下面的img的上边距来实现数字图片的显示；

// ie6下解决原理

首先用hack将background设为none，然后用微软针对ie专有属性将png图片显示在 img 上。
 -->
</body>
</html>

很实用的线路图模块代码

作者: luo 日期: 2011年04月26日没有评论

仿naver 公交信息搜索内容页的模块代码，感觉谢的不错，在这展示一下，各位有更好的写法的请多多指教…

<!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=utf-8" />
<title>公交线路图</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'宋体',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
.wrap{width:573px; padding:20px; border:1px solid #000; margin:auto;}
.line_box{background:url(http://sstatic.naver.net/keypage/image/bus_info/bg_buslinemap.gif) repeat-y 0 0; width:573px;}
.line_box .inner{ background:url(http://sstatic.naver.net/keypage/image/bus_info/bg_buslinemap_s.gif) no-repeat 0 0; padding-top:18px;}
.line_box ol{ padding:0 0 12px 63px;overflow:hidden;height:1%;}
.end_l{background:url(http://sstatic.naver.net/keypage/image/bus_info/bg_buslinemap_end.gif) no-repeat 0 100%;}
.end_r{background:url(http://sstatic.naver.net/keypage/image/bus_info/bg_buslinemap_end.gif) no-repeat -600px 100%;}
.line_box ol li{ height:41px; width:130px; line-height:17px; padding:11px 40px 0 0; background:url(http://sstatic.naver.net/keypage/image/bus_info/bg_bussr.gif) no-repeat 0 0;}
.line_box ol li.fl{ float:left;}
.line_box ol li.fr{ float:right;}
</style>
</head>
<body style="padding-top:50px;">
<div class="wrap">
	<div class="line_box">
		<div class="inner">
			<ol class="end_r">
			<li class="fl">知春路口东1</li>
			<li class="fl">知春路口东2</li>
			<li class="fl">知春路口东3</li>
			<li class="fr">知春路口东4</li>
			<li class="fr">知春路口东5</li>
			<li class="fr">知春路口东6</li>
			<li class="fl">知春路口东7</li>
			<li class="fl">知春路口东8</li>
			<li class="fl">知春路口东9</li>
			<li class="fr">知春路口东10</li>
			<li class="fr">知春路口东11</li>
			<li class="fr">知春路口东12</li>
			<li class="fl">知春路口东13</li>
			<li class="fl">知春路口东14</li>
			<li class="fl">知春路口东15</li>
			</ol>
		</div>
	</div>
</div>
</body>
</html>

提示：你可以先修改部分代码再运行。

css控制图片在div内垂直居中

作者: luo 日期: 2011年04月18日没有评论

css控制图片在div内垂直居中效果，兼容所有浏览器

<!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=utf-8" /> <title>图片垂直居中</title> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none; color:#333;} a:hover{text-decoration:underline; color:#F00;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clearfix:after{ content:"\020"; display:block; height:0; clear:both; visibility:hidden;} .clearfix{ zoom:1;} .piclist{ width:780px; border:1px solid #000; padding:10px 0; margin:0 auto;} .piclist ul li{ float:left; width:162px; padding:5px;border:1px solid #000; margin:4px 0 0 16px;} .piclist ul li .thumb{ width:160px; height:160px; background:#CCC; border:1px solid #333;line-height:0; font-size:0; text-align:center;} .piclist ul li .thumb .hfix{ height:100%; display:inline-block; width:1px; vertical-align:middle; margin:0 -1px;}/* 图片旁加入此类 */ .piclist ul li .thumb img{ vertical-align:middle; position:relative; left:1px; margin-left:-1px;} .piclist ul li dl{ padding-top:5px;} .piclist ul li dl dt{ font-weight:bold;} .piclist ul li dl dd{ color:#999;} </style> </head> <body> <h1 align="center">图片垂直居中</h1> <div class="piclist clearfix"> <ul> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

CSS自定义滚动条样式(转)

作者: luo 日期: 2011年04月13日没有评论

相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。

IE下的滚动条样式

IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。

这些样式规则很简单：

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。

这里，很久以前danger做了个基于Flash的可视化工具，简单但是好用：

选中CSS选项即可自动生成CSS样式，这里不再过多的介绍了。嗯，多谢大猫老湿推荐。

webkit的自定义滚动条样式

yes，这里才是今天要重点介绍的。

从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。

webkit最近实现了对滚动条的支持，先看一个简单的demo：

不过，webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素：

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

通过这些伪元素，可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

:horizontal – horizontal伪类应用于水平方向的滚动条
:vertical – vertical伪类应用于竖直方向的滚动条
:decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment – increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end – 类似于start伪类，标识对象是否放到滑块的后面。
:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button – 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button – 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
:corner-present – 用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive – 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

关于具体的demo，这里不再做了，网上已经有很多demo可以参考，比如，webkit官方的这个，具体的线上项目中也有现成的例子，比如，QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。

值得一提的是，webkit的这个伪类和伪元素的实现很强大，虽然类目有些多，但是我们可以把滚动条当成一个页面元素来定义，也差不多可以用上一些高级的CSS3属性，比如渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发挥了。

PS:中间部分术语翻译不到位，欢迎斧正。

原文地址：http://www.qianduan.net/css-custom-scroll-bar-style.html

表格出现纵向滚动条时在IE6、7下截断最后一个td内容的解决方案

作者: luo 日期: 2011年04月11日没有评论

近期在修改公司搜索页面的dtd时遇到当div内的table出现纵向滚动条时，在ie6和ie7下会把最后一个td的内容覆盖掉一部分，我当时的第一个解决办法是给ie6、7写hack 单独给table下了width：97%；但结果很不满意，后来还是我们经验丰富的part长给帮忙解决的，他在ie6、7下使用了 table-layout:fixed 和width:auto; 显示效果和其他浏览器一致，问题也解决了，但遗憾的是还是没有脱离hack ，哪位大侠有更好的解决方案也请留言指教。

下面是代码示例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table纵向滚动条</title>
</head>
<body>
<div style="width:500px;height:200px;overflow:auto;overflow-x:hidden;border:1px solid #333;">
<!-- 在ie6、ie7 下使用table-layout:fixed和*width:auto可解决当div内表格出现纵向滚动条时截断最后一个td内容的bug  -->
	<table  border="1" style="table-layout:fixed; width:100%; *width:auto">
		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
	</table>
</div>
</body>
</html>

UEDspace

专注于web前端开发、关注用户体验。