摘要：按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏 览器中显示正常，没有任何问题。但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的 鬼。1、当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同，也就是说无论你使colspan的属性值为多 少，剩余列的空间都不进行解析。 2、同一行反复的在"display:none;"与"display: 阅读全文

摘要：第一种，只通过CSS让IE6显示PNG透明背景：1. 使用CSS滤镜写法，公式如下：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled='bEnabled' , sizingMethod='sSize' , src='sURL' )引用<--其中变量信息-->enabled= : true:滤镜激活。 false:滤镜被禁止。 sizingMethod= : crop:剪切图片以适应对象尺寸。 [即不平铺] image: 默认值。增大或减小对象的 阅读全文

摘要：input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。一直没弄明白为什么这样子，今天听罗浮宫里的同学一讨论，才知道原因所在。初步结论如下：IE：不管该行有没有文字，光标高度与font-size一致。FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。Chrome：该行无文 阅读全文

摘要：最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章 阅读全文

摘要：转自：http://www.xiaoyezi.com/2010/06/22/find-out-the-length-of-units-and-the-difference-between-css-em-ex-px-pt-in1. css相对长度单位Ø em 元素的字体高度Ø ex 字体x的高度Ø px 像素PixelsØ % 百分比Percentage 2. css绝对长度单位Ø in 英寸Inches（1英寸=2.54厘米）Ø cm 厘米CentimetersØ mm 毫米millimetreØ pt 点Poin 阅读全文

摘要：当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。Steve Clason给出了解决方法：给元素添加display:inline;/*IE6下将产生双倍边距*/.floatedEl {float:left; margin-left:100px;} /*修正*/.floatedEl {float:left; margin-left:100px; display:inline;} 阅读全文

摘要：1 <p>这段文字会在所有浏览器显示</p> 2 <!--[if lte IE 6]> 3 <p>这段文字仅显示在 IE6及IE6以下版本。</p> 4 <p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p> 5 <![endif]--> 6 7 <!--[if gte IE 6]> 8 <p>这段文字仅显示在 IE6及IE6以 阅读全文

摘要：这主要是IE在对innerHTML进行写操作的时候会检查infoDIV是否具备做为这些内容中html对象容器的要求，所以当你发现这些错误出现，尝试做两件事情：1、检查你尝试加到innerHTML的html代码是否包含破损的html标签（某些标签或许缺少关闭标签）. 2、把你的容器改成那些比较“包容”的标签，如 <span> </span>, <div> </div>特别注意的是 <tbody>, <table>, <tr>标签里面加正确格式的 <td>标签都有可能出错，所以应该避免使用这些标签作为容 阅读全文

摘要：转自:http://www.cnblogs.com/rubylouvre/archive/2009/09/04/1559557.html一个很显浅的寓言，千年老树，电打雷劈，屹立不倒，却毁于蝼蚁的侵袭之下。自以为精通CSS的人，常常被一些小问题搞到头晕脑胀。通常是一个很小的数值，经过层层放大歪曲后，整个布局就走形了。CSS是一门很简单的语言，易学易用，但也最容易出垃圾代码。这是没有深入研究这门语言所致。本人认为，CSS是由以下三大块构成的：默认值，继承系统与加权系统。默认值，也就是浏览器在用户没有设置属性的情况下，默认指定的属性。CSS框架基本都有一个叫reset.css 的文件，就是对其进行 阅读全文

摘要：事物绝非十全十美总有强差人意的一面，之前针对浮动分析了其引起文本重影的怪异问题，而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。1.position:relative;属性值导致overflow:hidden;失效。问题：在IE6/7中子级设置position:relative;属性值后，导致父级的overflow:hidden;失效。Demo1分析：与定位的层级关系有关，IE6/7解析为内容已经跳出文档流，以致父级误以为没有包含内容。解决方案：对于IE6可以为父级添加定位属性纠正问题，但IE7依然无效。2.overflow充当了position:relative的角色问题：在IE6或IE 阅读全文

摘要：转载自:http://isd.tencent.com/?p=1481这问题在网络相信已经有不少人问到，最近再次被牵起讨论，籍此记录一下个人的理解，border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。1.性能差异【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。2.兼容性差异兼容 阅读全文

摘要：转载自:http://www.cnblogs.com/JustinYoung/articles/jpg_png.html为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。有时候我们可能会因为一张格式不正确的 阅读全文

摘要：IE的haslayout是个麻烦的东西，这个并不是w3c的标准属性，而是IE特有的。所以，对于解决IE特有的一些css诡异现象比较有效。 非原创来源网络，原文地址：http://www.satzansatz.de/cssd/onhavinglayout.htmlhasLayout概述Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout"得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为"尺寸臭虫(dimensional bugs)"，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。“Lay 阅读全文