摘要: 所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍。下面的代码: <div style="width:200px;height:50px;background:#ccc;"> <div style="width:100px; height:50px;float:left;margin-left:10px; background:#eee;"></div> </div> IE6显示效果为:IE8显示效果为:可以看得出来左边距在IE6下面明 阅读全文
posted @ 2012-03-24 13:10 mr.coke 阅读(3405) 评论(0) 推荐(0) 编辑
摘要: 教你用FLASH做背景 让页面炫起来 阅读全文
posted @ 2012-03-24 13:09 mr.coke 阅读(211) 评论(0) 推荐(0) 编辑
摘要: CSS3很好很强大,例如圆角、阴影、渐变透明、渐变背景等等,但是IE6、IE7、IE8都不支持,现在利用VML可以实现,只需要加载一个小小的文件即可:ie-css3.htc(←点击下载)VML 是什么?VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。ie-css.htc是什么?.htc文件 阅读全文
posted @ 2012-03-24 13:04 mr.coke 阅读(277) 评论(0) 推荐(0) 编辑
摘要: 记得以前Facebook有段时间使用了非常多的半透明边框(Facebox),虽然现在不支持了,但是还是值得研究一下。你有可能觉得这样写就行了: #lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); } 然而白色背景会一直扩散到边框上,变成如下的样子:还好我们有CSS3的background-clip属性#lightbox { -moz-background-clip: border; /* Firefox 3.6 */ -webkit-background-clip: border; /* Safar... 阅读全文
posted @ 2012-03-24 13:03 mr.coke 阅读(6347) 评论(0) 推荐(0) 编辑
摘要: PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多,目前,最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明,会显示一个灰色的框。 解决的办法也是有多种,在这里列出常用的其中一种:IE6显示透明PNG背景:使用css滤镜。 background-image:none,filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://images.cnblogs.com/bg.png 例 阅读全文
posted @ 2012-03-24 13:01 mr.coke 阅读(251) 评论(0) 推荐(0) 编辑
摘要: CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}.下面就是JS 控制CSS样式表的语法对照:CSS语法(不区分大小写)JavaScript语法(区分大小写)borderborderborder-bottomborderBottomborder-bottom-colorborderBottom 阅读全文
posted @ 2012-03-24 12:59 mr.coke 阅读(3821) 评论(1) 推荐(0) 编辑
摘要: 一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的 话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用vertical-align还可以)。例如有如下代码:<form><input type="text"name="foo"value="Test Field"/><input type="image"src="images/button.gif 阅读全文
posted @ 2012-03-24 12:03 mr.coke 阅读(2397) 评论(0) 推荐(0) 编辑
摘要: CSS hack是由于不同的浏览器,比如IE6,IE7,Firefox等,对CSS的解析不一样,导致解析的页面效果不一样,这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到同样页面效果。CSS hack原理:IE都能识别*,FF不能识别*IE6能识别*,但不能识别!importantIE6识别_,IE7和FF均不识别_IE7能识别*,也能识别!importantFF不能识别*,但能识别!important所以大家就可以用这些符号来区分不同的浏览器,以下两种方法几乎能解决现今所有css hack:1. !important随着IE7对!i 阅读全文
posted @ 2012-03-24 11:58 mr.coke 阅读(281) 评论(0) 推荐(0) 编辑
摘要: 你对CSS中使用!important解决IE6 IE7 Firefox兼容性问题的方法是否了解,这里和大家分享一下,首先我们看一下盒模型的概念。 CSS中使用!important解决IE6 IE7 Firefox兼容性问题 ◆首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4个区,分别是:内容、内边距(padding)、边框(border)和外边距(margin)。而Width宽度的计算,CSS有它的标准。但是实际上,不同的浏览器的表现却不同。比如, Firefox(FF)是准确按照CSS标准:width为内容的宽度,也就是说: 层的宽度=widt... 阅读全文
posted @ 2012-03-24 10:03 mr.coke 阅读(660) 评论(0) 推荐(0) 编辑
摘要: 在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面。javascript我这次就不谈了,先说说css。 为了适应不同浏览器不同的版本(版本主要就ie来说),ie这朵奇葩现在我们要兼容6-9,它的10也快出来了。。。在ie下我们可以写条件注释来区分 ie和其他浏览器,以及ie的版本,这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了,直接上代码<!DOCTYPE html> <html> <head> <title>Css Hack 阅读全文
posted @ 2012-03-24 10:02 mr.coke 阅读(150) 评论(0) 推荐(0) 编辑
摘要: 感觉不错,拷贝过来。嘿嘿。 很多朋友搞不清楚CSS中有哪些HACK,怎么使用,我翻译+整理了一下贴在这里。这篇文章是关于CSS的hacking技术。不要和微软专有的CSS属性“滤镜”混淆。 在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好。不幸的是,我们并不是生活在理想的世界里,浏览 器们布满了BUG和不一致。创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法。通过使用BUG和未实现的CSS,开发者就能够为不同的浏览 器应用不同的规则。HACK和FILTER是开发者强有力的武器。了解各种常用的HACKS以及它们如何工作,是件重要的事,但什么时候用和什么时候... 阅读全文
posted @ 2012-03-24 10:00 mr.coke 阅读(12410) 评论(2) 推荐(1) 编辑