DIV CSS经验总结

(一）IE6、IE7、IE8中overflow:hidden不起作用的情况
 

以前商品详情页的(商品大图下的)小商品图片列表中的图片是直接在样式设定死的宽和高。如 img{width:45px;height:45px}
但是我们的商品图片是不规则的，因此为了使其商品图片上下左右垂直居中。使结构和样式发生了如下变化

<div class="product-pic album">
<div class="thumb">
 <ul>
 <li>
  <div class="shop-detail-img-outer">
   <div class="shop-detail-img">
    <p>
     <a title="" rel="{gallery:'gal1', smallimage: 'http://img1.f.itc.cn/mall/3995/65/12/312x312_39956512.jpg', largeimage : 'http://img3.f.itc.cn/mall/3995/65/12/39956512.jpg' }" href="javascript: void(0)">
      <img alt=" " src="http://img2.f.itc.cn/mall/3995/65/12/45x45_39956512.jpg">
     </a>
    </p>
   </div>
  </div>
 </li>
 .........
 </ul>
</div>
</div>

样式如下（其实使用了定位，为了居中）：

.shop-detail-img-outer{width:45px;height:45px;padding:2px;border:1px solid #c1c1c1;overflow:hidden;}
.shop-detail-img{width:45px;height:45px;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle; }
.shop-detail-img p{position:static;+position:absolute;top:50%;}
.shop-detail-img img{position:static;+position:relative;top:-50%;left:-50%; border:none;max-width:45px;max-height:45px;}

.album { display: block; }
.album .thumb { width: 100%; overflow: hidden; height: 62px;}
.album .thumb ul {margin: 0; padding: 0; width: 310px; height: 62px; overflow: hidden; display: block; }
.album .thumb ul li { float: left; margin: 5px 5px 5px 0px; list-style: none; }

从上述样式中不难看出ul宽310px高62px超出隐藏. 但在Firefox中正常，超出部分隐藏，但是在IE6、IE7、IE8、Sogou高速下都显示了出来.如下图片.
做了这么多年的前端了，第一次发现在这样的问题。实在头疼。一开始单独拿出这段代码发现没有问题，认为是上下影响导致的，但不是，几经波折，发现是设定overflow:hidden层里有定位标签的问题。最后终于搞定。

解决方案：只需要在设定overflow:hidden层加入定位即可。如在 .album .thumb ul中加入{position:relative;left:0px;top:0px;}即可

（二）xhtml 1.0与html4.0区别大全

（三）弹出窗口局中，并使用整个页面变暗
 

对应的DOM及JS如下：

整个body的高度
document.body.scrollHeight

整个body的宽度
document.body.scrollWidth

function Open() { sDisp(0); document.getElementByIdx_x("divPageMask").style.display="block"; document.getElementByIdx_x("divOpenWin").style.display="block"; document.getElementByIdx_x("divPageMask").style.width= document.body.scrollWidth + "px"; document.getElementByIdx_x("divPageMask").style.height= document.body.scrollHeight + "px"; var divOpenWin=document.getElementByIdx_x("divOpenWin"); divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2)+ "px"; divOpenWin.style.top = ((document.documentElement.clientHeight - divOpenWin.offsetHeight) / 2) + "px"; }

（四）Css技巧】DIV+CSS常见错误汇总

CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误：

　　1. 检查HTML元素是否有拼写错误、是否忘记结束标记

　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 Webjx.Com

　　2. 检查CSS是否正确

　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

　　3. 确定错误发生的位置

　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

　　4. 利用border属性确定出错元素的布局特性


　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

　　5. float元素的父元素不能指定clear属性

　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

　　6. float元素务必指定width属性 Webjx.Com

　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

　　另外指定元素时尽量使用em而不是px做单位。

　　7. float元素不能指定margin和padding等属性

　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

　　8. float元素的宽度之和要小于100%

　　如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 网页教学网

　　9. 是否重设了默认的样式? 网页教学网

　　某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

　　10. 是否忘记了写DTD?

　　如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
　　 〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"〉

（五）设置半透明背景色或图片的CSS样式

opacity是CSS3提出的（看来能通过w3c），IE都不支持（该死的IE），要实现同样效果，IE得用 filter:alpha(opacity=50); 来进行解释。搜索到一篇相关例子，是用在图片上的。代码如下（不加moz相关一般都没问题)

图片代码如下：
<img src="powerbookg4.jpg" class="ban_touming"
onmouseover="this.style.MozOpacity=1; //鼠标放上去时候显示为不透明
this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5; //鼠标离开时候恢复到半透明
this.filters.alpha.opacity=50">

图片半透明样式：

.ban_touming{
（七）为了让网站更好呈现，应该在后台或前端写一个WEB分析，比如访问量，加载时间，再做分析改进

【Web分析】10个强大的开源 Web 流量分析工具
Web流量分析工具多不胜数，从 WebTrends 这样专业而昂贵的，到 Google Analytics 这样强大而免费的，从需要在服务器端单独部署的，到可以从前端集成的，不一而足。本文收集并介绍了10个功能强大的开源 Web 流量分析工具，因为是开源的，因此可以免费部署到你的网站。 
 (八）【联想面试题】网页制作笔试题

1.什么是网站重构？ div+css的布局较table布局有什么优点？
2.如何理解css盒模型？
3.平时做网页经常使用哪些hack?
4.如何理解表现与内容相分离？
5.如何解决ie6的双边距问题？
6.如何定义高度为1px的容器？
7.如何实现一个层在浏览器中垂直左右居中？
8.如何解决ie6的3像素 问题？
9.为什么FF下文本无法撑开容器的高度?如何解决？
10.怎么样才能让层显示在FLASH之上呢?

1、什么是网站重构？ div+css的布局较table布局有什么优点？

把"未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点"变成"让标记回归标记的原本意 义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。"的过程就是网站重构

网站为什么要进行重构（网站重构的好处）

a、使页面加载得更快速；

b、降低带宽带来的费用：节约成本；

c、让你在修改设计时更有效率而代价更低；

d、帮助你的整个站点保持视觉的一致性；

e、更利于搜索引擎的检索（符合SEO的 规范）；

f、令站点更容易被各种浏览器和用户访问（包括手机、PDA和 残障人士使用的文字浏览器）；

g、兼容不容忽视的Mozilla 系浏览器（Firefox 份额）；

h、提高你的职场竞争实力(事实上也 就是降低失业的风险)。

div+css的布局较table布局有什么优点:

1、改版的时候更方便 只要改css文件。
2、页面加载速度更快、结构化清晰、页面显 示简洁。
3、表现与结构相分离。
4、易于 优化（seo）搜索引擎更友好，排名更容易靠前。

2.如何理解css盒模型？

每个HTML元素都是长方形盒子 外边局(margin)、内边距(padding)、边框(border);

3.平时做网页用的css hack?

Ie6 * _; ie7 *, *+,!important;  ff !important.

4.表现与结构相分离

简单的说就是 HTML中只有标签元素  表现完全是由CSS文件控制的

5.解决ie6双边距问题

块级元素就 加display：inline；
行内元素转块级元素 display：
inline后面再加display：table

6.如何定义高度为1px的容器？

{heigh：1px; width:10px; background:#000; overflow:hidden}ie6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line-height:1px这样也可以解决

7.如何实现一个层在 浏览器中垂直左右居中？

margin：auto

8.如何解决ie6的3像素 问题？

_zoom:1; margin-left: value; _margin-left: value-3px;

9.为什么FF下文本无法撑开容器的高度?如何解决？

清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}

10.怎么样才能让层显示在FLASH之上呢?

解决的办法是给FLASH设置透明属性

<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

补充:

1、margin-left:10px在FF和IE6下显示问题。IE6显示 20px,FF显示10px。

  用!important就可以解决了。margin-left:10px !important;margin-left:5px;

2、cursor:hand在FF不显示小手，如何解决？

  一句话：cursor;pointer;

3、要求在FF显示height为20px;IE6下显示height为25px;IE7下显示height为30px.

  #test{height:20px;}
  *html #test{height:25px;}
  *+html #test{height:30px;}

这个以前我们说过，请参考【IE6的疯狂Bug之九】解决CSS兼容性最常用的"Haker"
三个就写上，FF只认识第一个#test,IE6只认识第二个*html #test，IE7只认识第三个*+html #test
 PS：DTD必须加上<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd“>要不还是不认。

4、在IE中内容会自适应高度，而FF不会自适应高度。

在要自适应高度的层中加一个层，样式为
.clear{clear:both;font-size:0px;height:1px}，
这样解决有一个小小的问题，高度会多一个像素。还有一种解决方法，给当前层加上一个伪类
#test:after {content: "."; display: block;   height: 0; clear: both; visibility: hidden;}

1.超链接访问过后hover样式就不出现的问题?

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A

2.IE6的双倍边距BUG

例如:

<style type="text/css">
   body {margin:0}
   div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }
</style>

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

3.为什么FF下文本无法撑开容器的高度?

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px; }

4.为什么web标准中IE无法设置滚动条颜色了?

原来样式设置：

<style type="text/css">
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>

解决办法是将body换成html

5.为什么无法定义1px左右高度的容器?

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

6.怎么样才能让层显示在FLASH之上呢?

解决的办法是给FLASH设置透明:

<param name="wmode" value="transparent" />

7.怎样使一个层垂直居中于浏览器中?

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>

这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

8、firefox嵌套div标签的居中问题的解决方法

假定有如下情况：

<div id="a">
   <div id="b"> </div>
</div>

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。

解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。

 

《注：转载自http://blog.sina.com.cn/s/articlelist_1691918800_1_1.html》资料更多


9、clearfix清除浮动进化史
我想大家在写CSS的时候应该都对清除浮动的用法深有体会，今天我们就还讨论下clearfix的进化史吧。

clearfix清除浮动