摘要：
关于盒子模型，引入w3cschool的一个图即可解释： css2.1标准规定，设置一个元素的width，height值，为其定义内容尺寸，即这个尺寸是作用在该元素的contextbox上的。 但是当给一个块级非替换元素设置width、height时，他们在ie6,ie7,ie8在混杂模式下（quriks mode）被错误的作用到了该元素的borderbox上，也就是说在这些浏览器中，width、height并不被认为是“内容尺寸”。这就是臭名昭著的ie盒模型bug。 解决这个问题最简单的方法是页面工作在标准模式下。 关于混杂模式和标准模式：如果页面没有声明<!DOCTYPE>则.. 阅读全文
摘要：
左右布局在前端开发中经常遇到，但是实现方法五花八门，自己也一直比较纠结该使用哪种方式，今天将收集到的一些方法总结一下，以备后用。 1、左右定宽布局 浮动应该是实现左右布局的最常用的方式，下面就是使用浮动制作左右布局的效果。i'm lefti'm right 如果左右两边的宽度确定，则可以左栏使用float:left; 右栏使用float:right; 这样可以解决ie6下3像素bug的问题。关于ie3像素bug请参考这里。 2、左栏定宽，右栏自适应宽度leftright <div style="margin: 0 auto;"> <div 阅读全文
摘要：
以前写前端代码时，ie下总是会出现各种莫名其妙的问题，如一行两列布局在其他浏览器下正常，但是在ie下确发现两列出现了上下错位。今天将ie下的3像素问题做个总结，后续遇到问题再更新。 1、bug描述 ie下两个相邻的div之间会出现3个像素的bug，这个bug是在当对其中一个div使用了float，而另外一个没有使用时会出现。leftright <div style="margin: 0 auto; background-color: #ccc;"> <div style="width: 200px; height: 100px; float: l 阅读全文