博客歪歪

原文

《CSS Hacks Targeting Firefox》 http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
来自css-tricks.com

译文

Firefox 2

html>/**/body .selector, x:-moz-any-link {

  color:lime;

}

Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default {

  color:lime;

}

所有版本的 Firefox

@-moz-document url-prefix() {

  .selector {

     color:lime;

  }

}

后记

随着浏览器的发展，Firefox 并不是没有兼容性问题。虽然它因为速度慢和竞争不过 Chrome 的原因，用户越来越少。但是对于追求完美的前端而言，偶尔还需要用到它的 hack。原文来自 css-tricks.com ，总共没几个字，但不是所有中文用户都能一眼定位到它。希望换了中文标题后这篇文章能够有所帮助。

当 CSS3 遇上较低版本 IE，滤镜就成了实现兼容性的折衷方案之一。虽然滤镜是过时很久的技术了，但还是能看出微软的高瞻远瞩——早在 IE6 就用滤镜实现了 bug 丛生的 CSS3 特性。

以下是 MSDN 《Alpha Filter》 中同时使用多个滤镜的示例，适合各个 IE 版本。滤镜之间使用空格或者回车隔开（DEMO）：

<DIV STYLE="width:100%; filter:

    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)

    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)

    progid:DXImageTransform.Microsoft.Wheel(duration=3);">

        Blurry text with smudge of gray.</div>

然而，由于滤镜本身的缺陷，这种组合时不时会有意想不到的效果。例如，单独使用  shadow 滤镜是给盒子里的文字加阴影特效的（DEMO）：

<div style="font-size:36px; width:300px; height:200px;filter:

progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

配合 Glow 滤镜也很正常，可以加上发光效果（DEMO）：

<div style="font-size:36px; width:300px; height:200px;filter:

progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)

progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

然而，再加上 Gradiant 滤镜，所有的效果就都加在 div 盒子而不是文字上的了 （DEMO）：

<div style="font-size:36px; width:300px; height:200px;filter:

progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)

progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)

progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

这或许是因为 Gradiant 滤镜单独使用时就是只会应用在盒子上（DEMO）？

<div style="font-size:36px; width:300px; height:200px;filter:

progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)">测试文字</div>

总结

有的时候此法不好用，在于 IE 的滤镜本身。比如 IE 的 Shadow 滤镜和 Gradiant 滤镜配合只作用于盒子。退一步说，即便 Shadow 单独使用是文字阴影，有时也能看到难看的杂色（见配图，配图来自 鑫空间）。这里的“有时”和滤镜及文字所用的颜色以及浏览器都有关系。

鑫空间 的文章 《IE下实现类似CSS3 text-shadow文字阴影的几种方法》  推荐的，使用两段一模一样的文字交叠显示才是最终无 bug 阴影的跨浏览器解决方案。

参考资料

Alpha Filter http://msdn.microsoft.com/zh-cn/library/ie/ms532967(v=vs.85).aspx
Applying Filters (Windows Embedded CE 6.0) http://msdn.microsoft.com/zh-cn/library/ee492403.aspx

MobilePress 是一款让 WordPress 支持手机和 iPhone 浏览的插件。今天汉化了下它的针对非 iPhone 手机的主题，点此下载完整汉化版。

解压后上传到 /wp-content/plugins/mobilepress/system/themes/ 下并覆盖所有文件即可。没有安装 MobilePress 请点 这里 打开插件首页。

手机主题预览亦可点这里： http://www.bokeyy.com/?mobile  查看本站使用的线上版本。

效果图

注意下图右下角的放大镜图标，无论图片被裁剪还是放大，该图标始终会在图片的右下角（DEMO）。

实现方法

图片外套一个层，大小始终和图片一样，让放大镜图标相对这个始终和图片同样大小的层绝对定位。因此设置其 CSS 属性 display:inline-block;position:relative; 。放大镜图标作为一个 span 紧跟在图片后面，设置 CSS  position:absolute; bottom:0; right:0; 。

display:inline-block; 和 display:table;

display:table; 也可以实现 div 始终和内包的图片大小相同，但是在 Firefox 8（可能也包含之前的版本） 不支持在其上设置 positiion:relative; ），故而不适用本文说的情况。

display:table-cell; 等类似的 display 属性也能同样控制 div 的大小，但是它们的浏览器兼容性更差，故而不讨论。

参考文献

《CSS 宽度自适应》- 源代码爱好者 – http://www.codefans.net/jscss/code/865.shtml