摘要：有这样一个需求，一段链接文字前面加一个ICON，要求鼠标划过文字或ICON时即触发链接，也就是要求ICON要和文字本身是在一个A标签下，保持联动关系。代码结构如下，ICON做为背景写在SPAN标签里：<a><span class="icon"></span>换一换</a>要求的效果是这样的：默认时划过ICON或文字时但是如果你够追求细节，就会发现某些浏览器的表达总是与众不同（是谁我就不点名了），当鼠标划过时它会变成这样：搞成这个样子一定是不成的，细节和兼容性还是要追求的。怎么办？方法1：把字也切进图里，两张图一张字带下划线的图 阅读全文
Webkit引擎的hack
2011-05-27 16:25 by rocdu, 384 阅读, 0 推荐, 收藏, 编辑
摘要：使用Webkit引擎的浏览器不少，Opera、Safari、Chrome、搜狗做了两种引擎其中一种也是这个。我还是主张能不用hack，还是不要使用hack的好。这东西，对未来的浏览器兼容性都是问号。/* Webkit引擎hack */@media screen and (-webkit-min-device-pixel-ratio:0){ /* 只有Webkit引擎的浏览器可以使用我 */ .test{ border:1px red solid; }} 阅读全文
对透明效果应用的说明
2011-05-13 11:48 by rocdu, 243 阅读, 0 推荐, 收藏, 编辑
摘要：DIV与TABLE的分别之一就是DIV具有层叠特性。DIV的层叠特性可以让UI设计变得天马行空，层层相叠，透明透底的技术实现是关键的一步。三种透明的方式：1、GIF像素透明图;2、CSS样式透明的调用，filter:alpha(opacity=60)与opacity:0.60属性共用解决浏览器兼容问题(本例透明度60%);3、PNG不规则与色彩渐变透明图。本图为GIF像素透明图:本图播放按钮为PNG圆形透明图，播放按钮下的透明层为CSS控制:PNG的透明图IE6不能友好支持，通过CSS滤镜来现实，但有一点要注意。看下面的路径结构图：style.css代码:background:url(../i 阅读全文
IE6下的text-indent属性BUG解决方法
2011-05-13 10:38 by rocdu, 1232 阅读, 0 推荐, 收藏, 编辑
摘要：在下图的CSS实现时出现了IE6的text-indent属性BUG问题。<h2> <span title="搜狐母婴" class="sohu-baby-icon">搜狐母婴</span> 育儿日历—活动早知道</h2>h2{ width:390px; color:#333; margin:0 auto 8px; font:600 14px/16px '宋体'; text-align:left; padding-top:5px; height:19px;}h2 .sohu-baby-icon 阅读全文
IE6_min-heigth_BUG
2011-04-29 18:00 by rocdu, 289 阅读, 0 推荐, 收藏, 编辑
摘要：IE6不认样式：min-height、max-height样式;做页面要给容器预设一个黓认最小高度值时，IE6不认min-height样式，解决的办法是使用HACK，_height:高度值，IE6专用。当内容高度超出容器时也会自动扩展，但如果其它浏览器直接写height值的话，内容超出容器时会出现问题所以还是要写min-height的。 阅读全文
JPG图片优化测试_JS脚本
2011-04-21 11:59 by rocdu, 327 阅读, 0 推荐, 收藏, 编辑
摘要：前端代码开发完成后，编辑会拿去填内容，其中图片元素是内容组成的重要一部分。通常前端UI合图使用GIF或PNG格式，内容图片则与JPG文件为主。前端优化中重要一项是控制文件SIZE，要求手写代码、简洁高效、去冗余、装饰图都埋在CSS里。挂一个jQuery(jquery-1.5.2.min.js)，大小在85KB以内。有些公司更吝啬字节，封装小量的基类使脚本相对更轻巧。但一张没有优化过的内容图片SIZE超过100KB是常有的事，对用户体验及服务流量带来不小的损失。用一个脚本来提醒编辑那些内容图片应该注意优化，这正是本文的目地。环境要求：由于使用了fileSize属性，脚本运行环境为IE浏览器。IE 阅读全文
Yahoo!网站性能最佳体验的34条黄金守则(转)
2011-04-19 16:01 by rocdu, 249 阅读, 0 推荐, 收藏, 编辑
摘要：Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、coodudokie、CSS、JavaScript、图片、移动应用等七部分。 一、内容部分1、尽量减少HTTP请求次数 终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以. 阅读全文
A标签中的行高问题
2011-04-15 23:54 by rocdu, 873 阅读, 0 推荐, 收藏, 编辑
摘要：今天做一页面时同事发现他写的A标签HOVER时应该出现的下划线在IE下没有显示出来？这个问题和浏览器的解析有关，以前就发现过，所以通常下我写A标签CSS时行高在没有特定要求下都是高出字号２个像素．字号行高相同有可能出现A标签HOVER时不出现下划线：font:12px/12px '宋体';没有问题的写法，行高要高出字号２个像素以上：font:12px/14px '宋体'; 阅读全文