Fdream's Blog
专注于WEB前端开发
Powered by Google
1 2 3

我们网站的静态资源(css、js和背景图片)和web应用程序是分开部署的,几乎所有的静态资源都部署在同一个应用下。最开始的网站很简单,对所有的静态资源都进行了gzip,包括所有的css,js,图片,flash等等,也一直相安无事。

直到……直到有一天用了png做背景图片,并且上传到服务器进行部署,发现在很多IE6都会在这个页面卡死,无法动弹,出事的几率非常的高。但是在内网部署的没有任何问题,那问题就只能比较内网和公网的服务器环境了。观察HTTP请求头部是个不错的方法,很快锁定是由于gzip的png引起的。内网服务器加上gzip测试,果然如此。

其实对图片等文件进行gzip是完全没有必要的,原因很简单:在web里面用作背景的图片99%以上都是gif或者jpg或者png,这些格式本来就是压缩过的,再用gzip对他们进行压缩只是徒增服务器负担而已。

很早以前就说过,IE8的标准模式已经不再支持滤镜了,不过IE仍然留了一条后路,你可以在CSS中这样写滤镜:

参考代码: [复制代码] [保存代码]

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

当非常遗憾的是,这个属性只有IE8能认识,如果要兼容IE6还有IE7,你必须在这一行的后面继续加上以前的滤镜代码:

参考代码: [复制代码] [保存代码]

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

注意:这个先后顺序非常重要!这会影响到IE8兼容模式下的显示效果。

官方blog(IE Blog)的关于在IE8中使用滤镜原文在这里...

标准遵守情况、性能、可靠性和安全性等设计标准构成了IE8的设计整体,包括新的和已经存在功能特性。最终,IE8的标准模式不再支持CSS表达式(CSS Expression)。这个变化在以前就曾经在IE blog上公布过,这篇文章将提供关于这个决定的更详细的一些信息。下面的FAQ(常见问题)将给您一个快速的总览:包括它的功能特性、我们设计决定的背后原因以及这对你的网站有什么影响。

什么是CSS表达式?

它也被称为“动态属性”,这个特有的CSS扩展是在IE5中引入的。远远在jQuery和Dojo等JavaScript库的诞生之前,它允许web开发者动态地通过CSS选择器来给页面绑定脚本。举一个例子,下面的CSS声明根据一天中的事件来更新页面中某些区块的背景颜色:

参考代码: [复制代码] [保存代码]

div.title { background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); }

为什么不再支持CSS表达式...

先说句题外话,昨天Silverlight 2.0发布了RTW(很多人都以为是RTM,这里的RTW是针对互联网版本的一个说法:Release to Web)版本。今天一大早的打开Google Reader,发现Flash Player 10和Flash CS4的文档已经发布了,中午吃完饭回来惊奇地发现Flash Player 10也跟着发布了。Flash Player和Silverlight的竞争是越来越白热化了,至少在新版本的发布上已经有这个意思了。

===========严肃的分割线============

好了,言归正传,回到我们的标题上来。UL的预设标记就是每个项目之前的那个原点或者方块或者数字之类的标记,就像我的blog侧栏里面“最新评论”或者“最新文章”那个地方的小原点一样。

很多时候,很多人不喜欢这个玩意儿,于是就想把它藏起来,这个也很好办,这么一行就搞定了:

参考代码: [复制代码] [保存代码]

ul{
    list-style-type:none; 
}

但是还是有一个问题,前面有好多空格好难看……

这个是用来设置被选择文字的背景色和文字颜色(就是文字高亮时的样子),例如:

Chrome支持::selection,Firefox是支持::-moz-selection,IE就啥都不支持了,不过这两个样式要分开写,像这样...

有个页面,写CSS测试时本地没有任何问题,上线后,不少人说用IE 7打开那个页面会Crash,用其他浏览器正常。系统多是Windows XP加上Internet Explorer 7,其中部分IE7是绿色版的(比如我的),还有部分装了Visual Studio。

最开始以为是javascript的问题,一个一个删除被怀疑的javascript代码,直到最后完全没有javascript代码,发现IE 7还是会Crash掉。再去掉CSS代码,发现居然好了,很稳定,怎么试都不出问题了。

开始逐步排查CSS代码,最开始还怀疑是PNG图片用了滤镜的问题,最后才发现不是这个问题,而是这样一行代码有问题:

引用内容:

.slide_indexwind .focus{width:402px;height:182px;overflow:hidden;}

第一次,把focus的名字改了一下,打开,好了,于是以为问题解决了。

过了不久,又有人报还是会Crash,于是直接把这一行删掉,好了,怎么刷也没有问题了,实在是不明白为什么?有没有人碰到过类似的问题呢?

很简单的,嗯,就是要做成这样的:

用CSS,当然得用层了,就是在图片上再加一个层,用来放那个按钮,按钮又有两种方式可以放,一种是直接用图片img标签,一种是通过背景图片放上去。这里我们就用背景图片这个方式来做吧!

首先准备这样两张图片:

宽19px,高32px

宽120px,高90px

我们想想:底部要放图片,上面要放一个按钮,貌似需要用到绝对定位,那我们需要为图片再定义一个div样式,用来放图片和这个按钮,我们可以这样写...

用CSS轻松实现圆角
25 晴天 2006-5
Fdream 发表于 Ajax Web, 已被阅读 20248 次评论 19 条
关键词:CSS 技巧

一直以为用CSS做一个圆角的链接会很麻烦,在蓝色理想上看到一些漂亮的圆角链接,背景图片还可以切换,于是下载下来看了一下,发现原来实现起来也很简单。下面这个是效果图:

具体实现方法如下:

先制作好这样两张背景图片,一张为左边的圆角,比较窄,另一张为右边的圆角,比较宽(为了使较长的链接仍能正常显示),如下图:

(left.gif)

(right.gif)

CSS代码为(注意其中的背景图片的定位,这个是实现效果的关键所在...

1 2 3
Copyright © 2005-2008,Fdream All Rights Reserved
Processed in 0.4843812 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号