div+css
firefox与IE中的div+css设计的区别
雪夜守候者 发表于 2008-07-27 15:38:10
问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外）
解决：写全单位如padding:0px;
2、水平居中
问题：div里的内容，ie默认为center，而ff默认left
解决：mairgin:0px auto;
3、高度问题
问题：如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的告诉，超过部分超出DIV底线以外，出现和下面的内容重叠的现象
解决：控制恰当的高度，或者不写，让浏览器自动调节高度，或者设置overflow:hidden;
4、clear:both;
问题：如果上面用float控制了n列DIV，下面ie会自动检测自动排列，ff则可能很不老实，到处乱动
解决：float结束后的下一个标签加clear:both;以结束float的控制
5、最大/小宽度问题
问题：min-width,max-width只是ff的命令，如何让ie实现同样的效果
解决：ie不认识min-和max-，实际ie认为min-width、max-width和width效果一样，可以用下面方法解决
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}
6、!important支持
问题：ff支持ie不支持
解决：无。ie会忽略。
7、游标状态
问题：cursor:hand;仅ie支持，显示手指状态
解决：使用cursor:pointer;ie和ff都支持
8、实际像素
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
所以排列好及列的表格时ie和ff显示宽度稍有区别
div+css设计常见的小问题
雪夜守候者 发表于 2008-07-27 15:33:41
1. IE6意外空白问题：
在并列的几个小区块横铺在一个大区块中的时候，本来小区块宽度的和等于大区块的宽度，在FF等其他浏览器中没问题，可是在IE6中就是有一个区块显示不出来要不就被挤到下面去了。这个时候可以设置小区块的css 为display：inline。如果这个办法还不行那就把各个区块的宽度减少1到2个像素。
2．IE6重影问题：
有时在IE6中在一个大DIV结束的底端老出现div内容结尾几个字符的重复，在FF等其他浏览器里面就不会出现。解决这个问题有两个办法：1）删除注释；2）在这个DIV的后面填加<div class=”clear”></div> 定义clear的CSS样式为：
.clear {
font-size: 1px;
clear: both;
visibility: hidden;
width: 1px;
}
推荐使用第二种方法，如果把注释去掉的话代码的可读性就受到影响了。
3．IE6无法居中的问题：
一般情况下只要给一个div（设其id为1）设置css样式：margin:0px auto;就可以让这个div在盛放它的容器（设其id为0）中居中了，它们的结构如下：
<div id=”0”>
<div id=”1”> … </div>
</div>
但是IE6就不行。这个时候可以给div0的css设置：text-align: center;
4. IE6有链接的图片有意外边框出现
在IE6中有时有链接的图片会有一个难看的边框出现，这个是由<a>引起的，这个时候可以设置通过在CSS中设置a { border:0px;}来消除。
5．FF中DIV里面的内容出轨
有时在IE中看很正常的内容在FF中却看到DIV里面的东西跑到外面了，这种情况在div有边框的时候尤为明显。这是因为div在IE中设置了高度后，如果div里面的内容如果高于div的时候，div会自动增高。但是FF就没有这么灵活，只要限定了高度就不会自己改变。这时可以通过重设高度来解决这个问题，也可以把高度设为自动。
6．FF中区域意外消失
在IE中很正常的布局在FF中却有一个区域消失了，这个问题在页面的最下角版权区块经常出现。这个时候可以通过给这个区域添加：clear:both;来解决。
其他的问题暂时想不起来了，在重构的过程中总会有一些莫名奇妙的问题，只要善于思考，不厌其烦的测试，或是到网上查找，总会找到解决办法的。每一个问题的解决都是一个不小的收获。
一些div+css设计技巧
雪夜守候者 发表于 2008-07-27 15:32:19
●在重构也面之前要做的准备工作：
1.拿一张PSD效果图,必需是PSD的这样的话你就可以自己更加随意的做切片；
2.先把PSD不做切片生成一个网页,起名为index_psd.html(这个页面做参考用)；
3. 在准备几个必需的文件夹 images(放图片) 、css(放css样式文件)、js(放js文件)；
●准备工作做好以后，先分析整个页面的结构。分析页面的结构要先整体再部分，先看页面中最大的板块是怎样关联的是上下并列还是左右平铺。看清了页面的大板块结构，就可以构建页面最基础的几个区块了。例如我们的页面试上中下结构，这时就可以写：
<div id=”header”></div>//放也面头和导航等
<div id=”content”></div>//页面的主题内容
<div id=”footer”></div>//页面脚版权声明等等
●写css的时候就需要使用index_psd.html这个文件了，用DW打开这个文件，选择视图模式，可以通过拉辅助线，来测量各个区块的长宽为设置CSS提供参考，这样做的好处就是重构出来的页面可以精确到1像素。
●每写好一个区块就要用IE和ff测试下效果，以便及时发现问题及时解决，在各个区块没内容的时候最好给他们都加上背景色。
●写好大的板块后，再分析大板块里面的内容，同样的道理也是先整体再部分，例如内容页面看起来是左右两个板块，这个时候我们可以把代码写为：
<div id=”header”></div>//放也面头和导航等
<div id=”content”>//页面的主题内容
<div class=”content-2-1”></div>//左边
<div class=”content-2-2”></div>//右边
</div>
<div id=”footer”></div>//页面脚版权声明等等
其中content-2-1中的2表是分两栏，2-1表示左栏，2-2表示右栏这样的分栏方式可以使自己查看页面代码的时候更加直观，分好多栏的时候这个优势更加明显。
●新闻列表，文章列表等等最好使用：
<ul>
<li>新闻标题1< >
<li>新闻标题2< >
…………
<li>新闻标题n< >
</ul>
●栏目列表加描述的最好用：
<dl>
<dt>栏目1</dt>
<dl>栏目1描述</dl>
<dt>栏目2</dt>
<dl>栏目2描述</dl>
</dl>
●在CSS文件定义的最开始最好加上如下语句
body,html{ height:100%; }
*{ margin:0px; padding:0px; }
●最好能给大的区块设置overflow:：hidden，这样可以保证容器不被撑开，从而破坏整个页面的布局。
IE中"重影"BUG的解决方法
雪夜守候者 发表于 2008-07-27 15:30:42
<!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=gb2312" />
<title>多了一只猪</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>
</body>
</html>
找了N久原因是有关CSS中的float属性，把float属性去掉说没有问题了，后来在蓝色理想看到了这个贴子才明白过来。
原文地址如下：
《IE中发现新BUG "重影"》
问题原因以及解决方法：
原因：
是注释造成的文字溢出，而且只有IE6才有这个BUG，而溢出文字的字数=注释的条数*2-1。BUG与注释文字的位置、区块的浮动以及文字区块的固定宽度都有联系。
解决办法：
1、不放置注释。这是最简单、最快捷的解决方法，但不方便，有时是需要注释的；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的元素之间，如在外面再加一层<div>：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div> </div>；（这个增加了多余的元素）
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个<br />或者空格；（这个增加了多余的元素）
6、使用IE注释格式，如：<!--[if !IE]>Put your commentary in here...<![endif]-->；（这个是可以使用的，不论在IE还是火狐都正常显示，而且也符合标准，但和常规的注释不一样）
7、给盒子加position:relative;属性。（个人觉得这个应该是最好的解决方法，应该只有IE6有这个BUG，可以只针对IE6加这个属性）