让IE 6,7,8支持CSS3的部分属性
让IE 6,7,8支持CSS3的部分属性。今天要给大家介绍的这个htc，它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。不相信？你可以在IE浏览器中打开我的博客看下效果。 下面来一一介绍： 提示：PIE.htc...
View ArticleCSS3特效 box-reflect(倒影)
倒影效果在现在的设计中十分常见，刚用HTML5+CSS3+PhoneGap开发了一个跨iPhone和Android平台的项目，上周一周都在忙碌的加班，现在终于抽出时间，赶紧补一篇博文。刚完成的项目中，其中登陆页就有这么一个倒影效果。项目效果截图： 这个截图是载入时的动画，五块3d布局的板块介绍项下落进入屏幕，倒影...[阅读全文]关键字: CSS, 精品收录
View ArticleIE下css bug集合-翻译自haslayout.net
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=425 来源：haslayout.net 作者：Zoffix Znet 翻译：张鑫旭(http://www.zhangxinxu.com/) 概述 IE浏览器以不支持大量的css...
View Articleie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名，同时也因其支持的css属性中存在大量bug。 这里收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！ 普通IE css bug bug名称 影响版本 ...[阅读全文]关键字: CSS, tag, 推荐, 精品收录
View Articlecss样式表中的样式覆盖顺序
有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下 Css代码 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; }...
View ArticleAuto-scaling input[type=text] to width of value?
Question: Is there a way to scale the width of an <input type="text"> to the width of the actual value? Here’s my JSFiddle: http://jsfiddle.net/hEvYj/2/ Answer: You can do this the easy way by...
View Articlea标签点击后的虚线框问题
以前一直用的方法都是： a {outline: none;star:expression(this.onFocus=this.blur());} 后来发现有瑕疵，不完美。体现在页面调用JS动作比较频繁的情况下，页面很卡~~~半个月内遇到两次这个问题，都是自己公司的平台。而网上却没有关 于这个的说法·~~而大家也都是按部就班，我不得不写一写。 解决办法就是写...[阅读全文]关键字: CSS, 精品收录
View ArticlejQuery+CSS3倒计时代码,带圆环进度条效果
jQuery+CSS3倒计时代码，带圆环进度条效果。烈火网提示大家，此代码使用了CSS3技术，如果您使用IE8及以下版本的浏览器，无法运行本效果，请改用火狐或Chrome浏览器，看到效果后，你会发觉这个倒计时超不错。编写时主要用到了CSS3的用到了旋转与遮罩的基本技巧。 为解决一些网页特效运行后不能显示效果（例如：...[阅读全文]关键字: CSS, 精品收录
View Article交互体验优化新手指南：4步让你的移动网站看起来像一个本地应用
原文出处： Kyle leads 译文出处： TAT.sheran 注：该文章大约3000字。它覆盖了移动端网页交互体验优化的很多不同方面的实际解决方案，用来优化你的网页运行速度。注意不是让你的站点运行的有多快，而是让你的用户感觉有多快。 当下在移动端构建一个优秀的网站逐渐变得越来越简单。无论是响应式设计还...[阅读全文]关键字: CSS, HTML, JS, 精品收录
View ArticleCSS – max z-index value [duplicate]
Question: This question already has an answer here: Mininum and Maximum value of Z-INDEX 10 answers Is there a maximum / minimum possible value for the CSS z-index property? Do different browsers have...
View Article什么是响应式Web设计？怎样进行？（2）
弹性图片 响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。 img { max-width: 100%;} 只要没有...[阅读全文]关键字: CSS, 精品收录
View Article什么是响应式Web设计？怎样进行？（3）
打造布局结构 当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的响应式调整；我们可以使用独立的样式表，或者更有效的，使用CSS media query。这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置...[阅读全文]关键字: CSS, 精品收录
View Article什么是响应式Web设计？怎样进行？（4）
显示或隐藏内容 通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方法。但是对于页面中的文字内容信息来说，则不能简单的只从”同比缩小”和”调整布局结构”这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经...[阅读全文]关键字: CSS, 精品收录
View ArticleLESS CSS 框架简介
简介 CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不...[阅读全文]关键字: CSS, HTML5, 精品收录
View Article修复iPhone的safari浏览器上submit按钮圆角bug
自从完成上次iPhone的几个页面效果后，一直在没有制作iPhone的页面效果了，今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子： 初载入页面后，表单中的inp...[阅读全文]关键字: CSS, 精品收录
View Article浏览器的渲染原理简介
看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因， 1）这篇文章太长了，阅读成本太大，不能一口气读完。 2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。 所以，我准备写下这篇...[阅读全文]关键字: CSS, HTML, JS, timeline, 精品收录
View Article前端技术：迅雷7.9宣传下载页面CSS3动画实现心得
产品宣传页往往会向用户介绍产品的功能特点，传达产品的理念，也是用户初次对新产品或产品新功能新特性的感观认知，对此，视觉设计师在设计产品宣传页的时候，往往会特别注重页面的精致度，而最终的设计稿出来后，往往只是一个静态的页面。从视觉设计的角度看，也许静态页视觉效果已经很好，但始终缺少给人...[阅读全文]关键字: CSS, 精品收录
View Article说说CSS学习中的瓶颈
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年，但未就学习专门写过文章，这回破处了。苍蝇不叮没有缝隙的鸡蛋，领导不做没有跟拍的表演，同样，想到写CSS学习的文章也是有原因的（虽然我的不少行为没有原因）。...
View ArticleCSS:line-height:150%与line-height:1.5的真正区别是什么？
line-height属性的细节 与大多数CSS属性不同，line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。 语法 line-height: normal | | | normal 根据浏览器决定，一般为1.2。 number 仅指定数字时（无单位），实际行距为字号乘以该数字得出的结果。可以理解为一个系数，子元素仅继...[阅读全文]关键字: CSS, 精品收录
View ArticleIE不解析CSS
今天在制作网页的时候发现IE6 IE7不解析CSS样式 在chrome, IE8+, firefox 下都是解析正常的 期限以为是CSS中的 /* */ 注释触发了IE6/7的BUG 导致引入的CSS不起作用 后来删除了里面所有的注释 发现CSS依然不起作用 于是GOOGLE了下 有人说可能是CSS和网页编码的原因导致CSS不解析 附上解决办法 编码不同...[阅读全文]关键字: CSS,...
View Articlecss之FILTER:progid:DXImageTransform.Microsoft.Gradient使用
FILTER:progid:DXImageTransform.Microsoft.Gradient使用 语法： filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth) 属性：...
View ArticleCSS属性:text-shadow，box-shadow，border-radius
这篇文章将对 CSS 的几个新属性 (text-shadow，box-shadow，and border-radius) 做基本介绍。这些 CSS3 属性通常用来加强页面布局。 RGBA 前面的 3 个值是 RGB 颜色值，最后一个值是透明度的级别（0 = 透明，1 = 不透明）。 RGBA 可以应用于与颜色的任何属性，如字体颜色，边框颜色，背景颜色，阴影颜色等。 ...[阅读全文]关键字:...
View Article使用CSS Sprite的一些最佳实践
众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。今天我们通过一个实例来学习CSS Sprites的使用方法。 下面是一张样图： 图片1 本文的目的并不是讲CSS Sprite如何让一个网站...[阅读全文]关键字: CSS, 精品收录
View Article使用 CSS sprite 的好处和坏处
原文：CSS Sprites: Useful Technique, or Potential Nuisance? 译文：CSS Sprites：鱼翅还是三鹿？ 无处不在的 CSS sptites － 为数不多的几个可以直接跳过”流行”这个过程，而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。虽然它真正流行是在 A List Apart...
View Article让IE6、IE7、IE8支持CSS3的圆角、阴影样式
想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下： 但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。 CSS3 有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等。 因为IE6时代，没有什么...[阅读全文]关键字: CSS, 精品收录
View ArticleIE6/IE7不识别display:inline-block属性怎么办
ie6，ie7的haslayout属性是个让人头疼的问题。在做导航条的时候，一般会用到ul li结构，大多数时候我们是把li设置为浮动，让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有...[阅读全文]关键字: CSS, 精品收录
View ArticleCSS3 border-image详解、应用及jQuery插件
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=518 一、border-image的兼容性...
View ArticlePIE使IE支持CSS3圆角盒阴影与渐变渲染
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=967 一、PIE之简述...
View ArticleProblems IE8: switching between display:none...
我们经常需要对dom做一些隐藏和显示操作，比如实现tab，这时候pie.htc的渲染会出现问题。 Hi there, First of all: thanks for that great script!!!! It works (almost) perfect for me and saves me a lot of photoshopping/coding to get round...
View Article一个ie6双边距bug
以前也听说过ie6有这个bug，但是没有注意不知道他长什么样。今天我终于看到他的真面目了。 先来说说什么是双边距bug吧。双边距的产生是由于float元素的浮动方向跟margin的方向一致导致的。也就是说float是left的时候，只有添加了margin-left才会产生双边距bug，要是添加了margin-right也不会产生这个b...[阅读全文]关键字: CSS, 精品收录
View Article