CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

ie6的问题还真多，解决这个办法是margin-left:235px;_margin-left:220px注意是;_margin-left:220px。

• 浮动引起的文本重影

在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题，一般来说这类问题在IE6中表现的比较多，但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题，但此时的页面却是没有任何注释～，持续地测试分析问题变得越来越有趣了

• 浏览器对居中的背景图片的兼容性

在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时，居中的背景图片转向以body左对齐。而在Opera及FF中,居中的背景图片依然以缩小的窗口宽度居中对齐，当浏览器窗口宽度少于内容宽度时，拖动横行滚动条就能察觉到页面内容与背景会有错位的现象。

• 缩小窗口<body>背景被裁掉

此现状出现在IE7、FF、Opera、Chrome、Safari中，当浏览器窗口少于内容，拖动窗口横向滚动条时能发现定义在的背景会被裁掉，似乎背景只计算了当前窗口的宽度。引起这问题的主要原因是在中定义了背景。在IE6不存在此问题。

• 页面元素的背景及boder被裁掉

在IE5~IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于内容宽度,拖动横向滚动条会发现页面元素的背景及boder被裁掉，主要原因是body子级元素定义了100%宽度或是承继父及的100%宽度（即没有定义宽度）。

• 缩少窗口<img/>被裁掉

在IE7、IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于<img/>宽度时,拖动横向滚动条会发现<img/>被裁掉，主要原因是<img/>父级元素定义了overflow:hidden;属性值。IE6中不存在此问题。

• CSS Sprites图片切割术与图片优化

关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。

• IE6支持PNG透明(alpha通道)的4种方法

想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。

• 一张背景实现自适应九宫格

在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，不过在切图方面会比较严禁有1px的不对称就会出问题，请留意下面例子的切割分析。

• IE5至IE7读取不了4095行以后的CSS

这是IE浏览器独有的错误，经过测试IE5至IE8会读取不了CSS文件中4095行以后的样式。又一个IE莫名的错误，为什么读取不了4095行以后的CSS实在令人费解，但其实CSS写到4095行几乎是不可能的事情，所以也不用太在意这BUG 。

• 渐变背景上的内容垂直居中

不同分辩率下的页面内容垂直居中，这问题在某些情况下会比较麻烦，如：内容在不一致的渐变背景之上，让其垂直居中于不固定高的页面，这效果处理不好会出现颜色不一致渐变颜色对应不上的丑陋!

• CSS让你的IE浏览器崩溃

严格来说不是光CSS就能令IE浏览器崩溃(crash)，而要配合一定的XHTML架构。到现时为止发现有两种写法的代码分别会令IE6、IE7崩溃，至于原因我尝试寻找过答案但至今还没找到...如你有这方面的认识或更详细的资料很希望你能分享一下！

• 一个标签应用三个背景图片

正确来说这并不算是什么新鲜技术,早在CSS2.0出现伪对象(Pseudo-Elements)时候就已经可以令一个标签应用三个背景图片，只不过是某些低版本浏览器对其支持不完善，而导致这技术在国内几乎无人使用。对于伪对象能轻易地完成三个背景图片的任务，而且玩法灵活多变。

• CSS的渲染效率

总结了部分所学、所听、所看、所问的一些CSS写作经验，它们与渲染效率及所占用消耗的资源有一定的关联。部分为自己理解所写，不排除会有错漏，欢迎提供更好的意见。

• CSS让你的IE浏览器崩溃(Crash your IE)

严格来说不单是CSS就能令IE浏览器崩溃(crash)，而要配合相应的XHTML架构。到现时为止发现有两种正常写法及一种错误结构分别导致会IE6、IE7崩溃(crash)，至于原因我尝试寻找过答案但至今还没找到…如你有这方面的认识或更详细的资料很希望你能分享！

• 边框有时会消失的解决办法

今天在CSS布局时, 遇到一个问题我DIV的边框我设置成 1px 的, 也就是一个矩形, 滚动条上下移动时, 边框有时会消失的. 百度了一下, 终于找到了解决办法在DIV中, 加一句: height:100%; 就可以解决

• 符合Web标准：W3C 验证中10个导致失败的常见问题

一直以来，大家都热衷于CSS网页布局的学习，我爱CSS―52css.com为此不断努力，大家为了符合Web标准，为了实现内容和表现分离。虽然通过验证只是一种检验的手段，并不是我们追求的目标，但有时候通不过验证，也是一件很郁闷的事情，今天列出W3C 验证中10个导致失败的常见问题，希望对大家有帮助。 W3C validation有时难以操作，但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告，说明你的XHTML尚未完善，可能无法...

• 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响

z-index在ie下缺省为：z-index:0; 而FF下则缺省为：z-index:auto; （这个结论已然在蓝色的《补遗》这个帖子中得出。而本文的讨论也是对《补遗》的总结及延伸。）你可以借助ie developer tool和firebug等工具进行测试查看z-index值。需要注意的是：z-index值须在设置position:relative/absolute/fixed之后方才生效。正是IE/FF下这一点区别导致ie,ff下z值的不同表现。注意：此处所说的z值区别于z-index,它指的是z轴层叠等...