分类目录归档：「 文章转载 」

转载一些好的文章！

拥有布局 IE haslayout(IE haslayout详解)

发表于 由 2 条回复»

找们那知道浏览器有bug，而且Windows上的lE的bug 似乎比太多数浏览器都多。IE/Win的衣现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布均是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有帮助的。

什么是布局

Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元素在没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。

在默认情况下拥有布局的元素包括:

  • body
  • 标准模式中的 html
  • table
  • tr, td
  • img
  • hr
  • input, select, textarea, button
  • iframe, embed, object, applet
  • marquee

继续阅读 »

无hack完美兼容的div垂直居中解决方案

发表于 由 5 条回复»

研究一个经典的CSS问题:DIV垂直居中。结合网上的各种方法自己总结出了一个无hack完美的兼容IE6,7,FF的垂直解决方案.你可以看下面的图来理解第三种方法               预览效果

vertical-align.jpg

1.当div内容为单行时，众所周知将div的height和line-height设置成一个相同的值。
2.当div高度不固定时，将父div的padding-top和padding-bottom设置成一个相同的值使其自适应。
3.当div高度固定时，有两种情况：
(1)非IE浏览器中可用如下代码使其垂直居中

.box{ display:table-cell; vertical-align:middle;}

(2)IE中不支持上面的属性，所以下面就得用blueidea上的一个方法了,代码如下

.box{ position:relative; }
.inner{ position:absolute; top:50%; left:0;}
.innerbox{ position:relative; top:-50%; left:0;}

继续阅读 »