随笔分类 -  CSS

子元素应该margin-top为何会影响父元素【转】
摘要：这个问题困惑了很久，虽然没有大碍早就摸出来怎么搞定它，但始终不明白原因出在哪里，如果只是IE有问题我也不会太在意，可问题是所有上等浏览器都表现如此，这样叫我怎能安心？今天总算下狠心查出来怎么回事，居然是CSS2.1盒模型规范……虽然很别扭，非常别扭的规定。 问题如下图，两层Div结构，Outer Div属性为“margin:0 auto”，本该紧贴外框顶部的，如果没有Inner Div，或者没有Inner Div的“margin-top”属性，一切如预期。但是当Inner Div设置了“margin-top:10px”之后，它的父元素Outer Div也被撑出来一个本不该有的“margin-. 阅读全文
posted @ 2013-05-26 10:05 evilfox 阅读(10330) 评论(0) 推荐(6)
IE 下背景透明的空白元素无法触发 click 和 hover 事件【转】
摘要：这个标题可以解释为：样式如下：.item { background: transparent; width: 100px; height: 35px;}结构如下：<div class="item"></div>然后，这个 item 在 IE 6、IE 7 和 IE 8 下将不响应点击或鼠标滑过事件，IE 9 正常。还有一个行为，当该 item 内有文字时，仅在文字上方响应 click 和 hover 事件，在 div 100px 宽度的空白地方，仍然不响应这两个事件：<div class="item">文字</d 阅读全文
posted @ 2013-04-03 13:52 evilfox 阅读(2133) 评论(0) 推荐(1)
Input的background-image属性的兼容性
摘要：一般来说，设置input按钮的background-image属性，在Firefox,Chrome等标准W3C浏览器中，只要写二行css:12background-image: url(images/hello.jpg);background-repeat: no-repeat;但是在IE下，只写上面二行CSS，input元素是不会显示背景图片的，需要写成如下形式，才能正常显示：1234background-image: url(images/hello.jpg);background-repeat: no-repeat;background-color: transparent;border 阅读全文
posted @ 2013-02-28 20:45 evilfox 阅读(6251) 评论(0) 推荐(0)
HTML上传控件input=file的美化
摘要：最近在研究上传的问题，html5支持ajax上传文件，不支持html5的可以用iframe替换（flash这个cpu/mem老虎请靠边站），但如果真的要在项目中应用，绝对不可以直接用 <input type="file" name="upload" />就完事了，必须要美化，美化的作用，1,使得所有浏览器下，看起来一样，2,提供一个一致的入口，方便操作。看看原生态的input=file在各个浏览器下的造型：上图为我的debian系统下，Firefox, Opera, Chrome浏览下的file样式，最后一个IE是虚拟机里的表现。丑陋不堪，而 阅读全文
posted @ 2013-02-28 16:50 evilfox 阅读(19594) 评论(0) 推荐(0)
ie6绝对定位BUG
摘要：在IE6中，当父级的宽高值为奇数时，子级绝对定位后总是差1像索，最好的解决方法就是尽量去设置宽高值为偶数，实在想解决，那就用css hack吧，，，_right:-1px ; bottom:-1px ....下例就是最好的证明，用了个JS去检测，IE6以上及标准浏览器必须得弹出 199 ，而只有IE6这个奇葩，竟然给来一个 198 ，晕啊。。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi 阅读全文
posted @ 2013-02-14 09:36 evilfox 阅读(375) 评论(0) 推荐(0)
ie6 position fixed
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf- 阅读全文
posted @ 2013-01-29 19:34 evilfox 阅读(140) 评论(0) 推荐(0)
IE6/7下如何实现inline-block
摘要：ie6，ie7的haslayout属性是个让人头疼的问题。在做导航条的时候，一般会用到ul li结构，大多数时候我们是把li设置为浮动，让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下padding的，但是在标准浏览器里面是可以设置上下padding的）。鉴于inline元素的这种特性，如果我们不浮动并且想让li显示在一行，而且可以设置高度，宽度以及上下margin，上下paddi 阅读全文
posted @ 2013-01-11 14:43 evilfox 阅读(1793) 评论(0) 推荐(0)
em（倍）与px的区别
摘要：在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因 为有一部法律来约束他们—例如美国的Section 508，强制网站达到一定的易用性。 关键点： 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于... 阅读全文
posted @ 2013-01-04 14:26 evilfox 阅读(176) 评论(0) 推荐(0)
如何设置一个div的背景透明度
摘要：http://css-tricks.com/rgba-browser-support/Css-Tricks讲到了一些方法，看了一些大型门户网站的CSS，也是采用了这种方法，也就是支持CSS3的浏览器就设置：background:rgba(255,255,255,0~1)，而低版本的IE浏览器就采用微软的独有的滤镜来实现：filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr=#AARRGGBB,endColorStr=AARRGGBB);使用方法：GradientType: 渐变的方向 ，0为 阅读全文
posted @ 2012-12-31 16:13 evilfox 阅读(5083) 评论(0) 推荐(0)
CSS属性Vertical Align使用方法讲解
摘要：[网站建设之]CSS属性Vertical Align使用方法讲解CSS有一个属性叫Vertical Align。当你第一次学习它的时候会有些困惑，因此我觉得我们可以通过它的用法来了解它。最基本的用法像这样：img{ vertical-align: middle; }注意在这个应用案例中，它被应用到了img元素上。图片通常是行内元素，意味着它通常是和文字在一起的。但是到底”在一起”确切的是什么意思？这就是Vertical-align所要解决的。有效值为：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。我 阅读全文
posted @ 2012-12-31 02:52 evilfox 阅读(6673) 评论(0) 推荐(1)
[转]那些年我们一起清除过的浮动
摘要：>浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个 阅读全文
posted @ 2012-12-31 02:35 evilfox 阅读(170) 评论(0) 推荐(1)
css之FILTER:progid:DXImageTransform.Microsoft.Gradient使用
摘要：FILTER:progid:DXImageTransform.Microsoft.Gradient使用 语法： filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth) 属性： enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false true: 默认值。滤镜激活。 false:滤镜被禁止。startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。... 阅读全文
posted @ 2012-12-30 02:36 evilfox 阅读(317) 评论(0) 推荐(0)
IE浏览器各版本的CSS条件判断 (转)
摘要：IE版本不动，有些地方的css表现也不同。为了hack，有时候需要用到版本判断。经典的hack是使用型号*下横线_感叹号!加属性来做的（详见文章CSShack，区分IE6，IE7，Firefox），不过感觉比较麻烦。还有一种是直接用条件语句来写的，见下文：IE8出到现在还没敢装，前些天下载了个Xenocode Browser Sandbox安装了下，发现之前一直用的一个纯CSS横向导航的水平居中出了问题，在IE8下完全居左了。找了很久没发现问题所在，索性每份CSS分开 屏蔽，最终确定是针对IE的CSS问题，得避掉IE8只对IE7及以下版本设置。之前只是针对所有的IE浏览器：＜!--[if IE 阅读全文
posted @ 2012-09-25 14:33 evilfox 阅读(503) 评论(0) 推荐(0)