三月, 2009

未分类 — 2 Comments
27
三 09

IE6 BUG：边框不能设为透明

前言：

有时候我们需要用纯CSS来写小三角，如下图：

代码：

HTML：

<body>
<div class="pointer"></div>
</body>

CSS：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;}

为了方便看效果，特意放大

问题：

正常显示效果：

IE6下却遭遇BUG（不透明）：

解决方法：

将实线改为虚线，代码：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent dotted;/*dashed亦可*/border-right:200px red solid;font-size:0;}

IE6下显示效果：

虽然边缘有轻微锯齿，但可以接受

意外收获：

Firefox、Chrome边缘比较平滑

而IE 6/7/8、Opera、Safari边缘有轻微锯齿

未分类 — 2 Comments
18
三 09

Yahoo与Gmail的CSS Sprites对比

前言：

使用CSS Sprite的目的是为了优化（(#‵′)凸）。

Yahoo，以左侧导航为例：

CSS Sprites图片地址：

http://l.yimg.com/a/i/ww/sp/trough_2.0_062308.gif

HTML：

<ul id="trough-1" class="col1">
<li><a href="r/4d" style="background-position:-400px -120px">Answers</a></li>
<li><a href="r/2h" style="background-position:-400px -440px">Autos</a></li>
<li><a href="r/25" style="background-position:0 -761px">Finance</a></li>
<li><a href="r/28" style="background-position:0 -1600px">Games</a></li>
<li><a href="r/2r" style="background-position:0 -1400px">Groups</a></li>
<li><a href="r/3o" style="background-position:0 -439px">HotJobs</a></li>
<li><a href="r/24" style="background-position:0 -600px">Maps</a></li>
<li><a href="r/3a" style="background-position:0 -161px">Mobile Web</a></li>
<li><a href="r/2i" style="background-position:0 -561px;display:inline">Movies</a> | <a class="trough_tv" href="r/2j">TV</a></li>
<li><a href="r/3m" style="background-position:0 -1562px">Music</a></li>
<li><a href="r/gx" style="background-position:-400px -1119px">OMG</a></li>
<li><a href="r/33" style="background-position:0 -40px">Personals</a></li>
<li><a href="r/2p" style="background-position:-400px -161px">Real Estate</a></li>
<li><a href="r/s3" style="background-position:-400px -1321px">Shine</a></li>
<li><a href="r/2q" style="background-position:0 -1640px">Shopping</a></li>
<li><a href="r/26" style="background-position:0 -800px">Sports</a></li>
<li><a href="r/29" style="background-position:0 -79px">Travel</a></li>
<li><a href="r/2k" style="background-position:0 -121px">Yellow Pages</a></li>
</ul>

图片分析（图中虚线为20*20的参考线）：

原始大小：

放大至200%：

特点：

  1. HTML结构清晰，背景写在a标签上；
  2. 切图方式：每个图标放置于20*20的单元格中，未从单元格左上角开始放置，而是上下左右都留有部分像素的距离（依据显示效果而定）。大部分情况下直接调用即可，如background-position:-400px –120px；偶尔需要调整偏移量，如background-position:0 -161px
  3. 第二列图标距离左侧400px，每行图标间隔一个单元格的距离，充分留白；
  4. 图片为gif格式，尺寸：420*1700，大小：16.2KB，总共80个图标。

Gmail，同样以左侧导航为例：

CSS Sprites图片地址：

https://mail.google.com/mail/images/2/5/chrome/icons7.png

HTML（以星标为例）：

<div class="nH pX">
<div class="nH">
 <div class="nH">
     <div class="pi" style="height:4px;">
         <div class="ph p" style="width:4px;"></div>
         <div class="ph q" style="width:4px;"></div>
         <div class="l o"></div>
     </div>
     <div class="l m">
         <div class="l n" style="margin-left:4px;">
             <div class="k" style="margin:-2px 4px -2px 0px;padding:0px;">
                 <div class="diLZtc">
                     <div class="nH">
                         <div class="qk">
                             <span id=":qj" class="" idlink="">
                             <div style="overflow:hidden;white-space:nowrap;">
                                 <div id=":r0" class="p5" idlink="">
                                     <a class="p9" href="https://mail.google.com/mail/#starred" target="_top" title="已加星标">已加星标</a><img class="pW" src="images/cleardot.gif" /></div>
                             </div>
                             </span></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="dJ"></div>
     <div class="pi" style="height:4px;">
         <div class="ph i" style="width:4px;"></div>
         <div class="ph j" style="width:4px;"></div>
         <div class="l h"></div>
     </div>
 </div>
</div>
</div>

图片放大至200%：

特点：

  1. HTML结构极度混乱（咳咳，至少我是这么认为），甚至还有内联元素span嵌套div的情形。背景写在img上（Gmail将所有放图标的地方插入一个1*1的透明图片：<img class=”pW” src=”images/cleardot.gif” />，然后根据不同的class设置拉伸至不同的大小及背景坐标，并用margin修正偏移量），这么做的原因也许是跨浏览器的inline-block（Firefox 3以前的版本不支持display:inline-block）
  2. 切图方式：每个小图放置于20*20的单元格中，大部分左上角顶齐，调用时直接用该图标左上角的坐标取值即可，如background-position:-20px –20px
  3. 每个单元格放一个图标，比较紧凑。
  4. 图片为png格式，尺寸：180*120，大小：4.83KB，总共47个图标。

对比（带有强烈主观色彩，请自行判断）：

Yahoo Gmail 胜方
HTML 结构清晰，易于维护 臃肿杂乱 Yahoo
图片排列 宽松 紧凑，易于维护（尤其是我们这种小屏幕人士） Gmail
CSS调用 方便，部分图片需微调background-position 方便，部分图片需微调margin 平手
图片优化 可改为png-8格式进一步压缩（YUI的PPT中提倡用png-8，为什么自己不这么做呢） 已压缩 Gmail

最后的话：

二者各有优缺点，大家可取其精华，弃其糟粕，根据项目特点任意发挥，囧

未分类 — No Comments
17
三 09

IE 6/7 BUG：下拉框select设宽度时option超出显示不全

问题如下图：

解决思路：

  1. 当鼠标移到select元素时将其宽度置为auto；
  2. 鼠标移开时恢复为原定宽度。

代码（基于jQuery）：

$(function() {
 $(".ProductAttributesSelect")
     .mouseover(function(){
         $(this)
             .data("origWidth", $(this).css("width"))
             .css("width", "auto");
     })
     .mouseout(function(){
         $(this).css("width", $(this).data("origWidth"));
     });
});

英文雅虎的注册页面有DEMO，童鞋们可以去围观下，O(∩_∩)O~

简译自：Select Cuts Off Options In IE (Fix)

未分类 — 2 Comments
10
三 09

CSS修饰上传域input type=”file”

在WebMail项目中，我们需要使用图片修饰的按钮来替代系统默认的上传域。

原理：

将上传上传域透明，绝对定位叠在修饰的图片按钮上方，点击图片按钮时其实是点到上传域。

问题：

图片按钮太大时，上传域的可点击区域不能将其完全覆盖。

解决方法：

加大字体。

HTML：

<input class="file" type="file" />

CSS：

input.file{font-size:5em;}

各浏览器显示效果：

嘿嘿，这下够用了吧~

延伸阅读：