联系方式

联系电话:13438487878
邮箱:4615914@qq.com

DIV CSS经验总结

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区别大全

XHTML 1.0 所做的工作就是将 HTML 4.0(最后的 HTML 版本)按照符合 XML 标准的要求加以改造。XHTML 1.0 并未定义任何新的元素和属性,而是沿用了所有 HTML 4.0 的元素和属性,因此 XHTML 1.0 与 HTML 4.0 是兼容的。XHTML 2.0 对于 XHTML 1.0 做了很大的改进,很多地方甚至与 XHTML 1.0 不兼容。由于目前主流的浏览器仅仅只能支持 XHTML 1.0,这里的讨论限制在 XHTML 1.0 的范围内。

XHTML 1.0 对于 HTML 4.0 做了改造,对于页面提出了一些新的要求包括:

1. 必须在页面最顶部加上 DOCTYPE 的声明。如果不加这个声明,浏览器就会按照 HTML 4.0 的方式来处理,而不把页面当作 XHTML 处理。

XHTML 1.0 的 DOCTYPE 声明有 3 种,分别对应 3 种不同的 DTD。

Transitional —— 最宽松的 DTD,可以使用带表现含义的标签和属性。

写法为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict —— 最严格的 DTD,不允许使用任何带表现含义的标签和属性。

写法为:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Frameset —— 用于使用了 frame 的页面(即,包含有 <frameset> 标记)。

写法为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2. 紧跟在上面 DOCTYPE 声明之后的是一个 XHTML 名字空间(namespace)声明,放在增强的 <html> 元素中,写法为:

<html xmlns="http://www.w3.org/1999/xhtml">

3. 由于 XHTML 1.0 页面就是合法的 XML 文档,而 XML 对于标签和属性都是区分大小写的,为了简单起见,XHTML 1.0 页面中所有的标签和属性都必须使用小写。

4. 通过在 <head> 元素中添加一个 <meta> 元素来声明页面中使用的语言。

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

5. 在 XHTML 中,所有的属性都必须要加上引号。

6. 在 XHTML 中,所有的属性都必须有值。

不能像在 HTML 4.0 中那样写:

<input type="checkbox" name="shirt" value="medium" checked>

而要写成:

<input type="checkbox" name="shirt" value="medium" checked="checked" />

7. 在 XHTML 中,所有的标签都必须关闭。

关闭标签有两种方式,包含内容的标签使用结束标签关闭,空标签在后面加上空格和“/”。例如:

<p>This is acceptable HTML and it is also valid XHTML.</p><img src="logo.gif" />

8. 不要在注释内容中使用“--” 。

“--” 只能使用在 XHTML 注释的开头和结束,不能出现在注释的内容中。下面的写法都是不允许的:

<!--Invalid -- and so is the classic "separator" below. -->

9. 把所有的特殊符号编码。

< = &amp;lt;> = &amp;gt;

(三)弹出窗口局中,并使用整个页面变暗
 
图片

对应的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{
opacity: 0.5;  //-moz-opacity:0.5; ff和oper等浏览器下的半透明
filter:alpha(opacity=50); //IE下的半透明
}

(六)【Css测试工具】IETester必备浏览器

IETester浏览器特点使用教程

通常我们在使用浏览器测试div+css兼容性时,会碰到一个问题,一个系统不能同时安装ie6、ie7、ie8浏览器,如果系统安装了任何一个版本浏览器,其他版本浏览器将无法安装。那怎么解决同时在系统中安装ie6、ie7、ie8浏览器呢?接下来我们来介绍一款 IETester浏览器软件。

copyright www.divcss5.com divcss5

IETester浏览器特点
IETester集成了微软的IE5.5、IE6、IE7、IE8版本的浏览器一款绿色软件。
IETester软件的效果图如上

IETester官方下载地址:http://www.my-debugbar.com/wiki/IETester/HomePage
自带中文和英文切换。

IETester是个相当神奇的小软体,IETester可以帮我们模拟网页在IE5.5、IE6、IE7与IE8 beta1等浏览器的相容性,让我们看一下辛苦作好的CSS 样式或网站版面是否可以在各个主要浏览器正常显示兼容。
IETester是以”分页标签”的方式像傲游一样浏览器分页标签,分别在不同的页签中显示你所指定的IE浏览器版本的网页浏览画面。
最小需求:Windows Vista 或者 Windows XP 安装 IE7 版本( 如果安装的 IE6 版本 ,则Windows XP 下的 IE6 有一些小问题,并且在这个配置下 IE7/IE8 版本…
IETester 包含5个版本的IE(5.5/6.0/7.0/8.0),完全可以满足对DIV+CSS的各版本IE兼容性的测试,再往前的版本也不支持 CSS 解析了,更何况也没有人在用 IE3/IE4 等古董级的玩意儿了。IETester具有Office 2007 的风格。每个标签前面的大大的数字就是当前使用的浏览器版本号。

IETester 工具:
集成了微软IE5.5、IE6、IE7、IE8浏览器内核,是DIV CSS调试浏览器兼容不可缺少CSS调试工具(推荐)。

(七)为了让网站更好呈现,应该在后台或前端写一个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双边距问题

块级元素就 displayinline
行内元素转块级元素
display
inline后面再加displaytable

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的进化史吧。
  1. .clear{clear:both;line-height:0;}

复制代码

clearfix清除浮动

首先在很多很多年以前我们常用的清除浮动是这样的。

现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用。

这种做法如果在页面复杂的布局要经常清除浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。但是我发现大型网站中 居然还在使用这种清除浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。

因此有很多大神就研究出了 clearfix 清除浮动的方法,直接解决了上面的缺陷,不需要增加空标签,直接在有浮动的外层加上这个样式就可以了,这也是我们今天要讨论的clearfix进化史。

起源
  1. .clearfix:after { 

  2.     visibility: hidden; 

  3.     display: block; 

  4.     font-size: 0; 

  5.     content: " "; 

  6.     clear: both; 

  7.     height: 0; 


  8. .clearfix { display: inline-table; } 


  9. * html .clearfix { height: 1%; }//Hides from IE-mac 

  10. .clearfix { display: block; }//End hide from IE-mac

复制代码
解释一下以上的代码:

对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的内容为空的块来为目标元素清除浮动。

第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。利用 * 对 IE/Mac 隐藏一些规则:

height:1% 用来触发 IE6 下的haslayout。

重新对 IE/Mac 外的IE应用 block 显示属性。

最后一行用于结束针对 IE/Mac 的hack。(是不是觉得很坑爹,Mac下还有IE)

起源代码可能也是很早期的时候了,再往后Mac下的IE5也发展到IE6了,各种浏览器开始向W3C这条标准慢慢靠齐了。所以就有了下面这个写法出现了。
  1. .clearfix:after { 

  2.     visibility: hidden; 

  3.     display: block; 

  4.     font-size: 0; 

  5.     content: " "; 

  6.     clear: both; 

  7.     height: 0; 


  8. html .clearfix { zoom: 1; } /* IE6 */

复制代码
IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。

Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成:
  1. .clearfix:after { 

  2.     visibility: hidden; 

  3.     display: block; 

  4.     font-size: 0; 

  5.     content: " "; 

  6.     clear: both; 

  7.     height: 0; 


  8. .clearfix{*zoom:1;}

复制代码
但是对于很多同学这种优化程度代码还是不够给力,clearfix 发展到现在的两个终极版。

重构clearfix浮动

构成Block Formatting Context的方法有下面几种:

float的值不为none。

overflow的值不为visible。

display的值为table-cell, table-caption, inline-block中的任何一个。

position的值不为relative和static。

很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。

因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求(会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。

我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个,但是display: inline-block会产生多余空白,所以也排除掉。

剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context。

因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。

这样我们新的.clearfix就会闭合内部元素的浮动。

后面又有人对此进行了改良:

终极版一:
  1. .clearfix:after { 

  2.     content:"\200B"; 

  3.     display:block

  4.     height:0; 

  5.     clear:both; 


  6. .clearfix {*zoom:1;}/*IE/7/6*/

复制代码
解释下:content:"\200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。

终极版二:
  1. .clearfix:before,.clearfix:after{ 

  2.     content:""; 

  3.     display:table; 


  4. .clearfix:after{clear:both;} 

  5. .clearfix{ 

  6.     *zoom:1;/*IE/7/6*/

  7. }

复制代码
这两个终极版代码都很简洁,终极版一和二都可以使用,以上代码都经过测试,大家赶紧用一下吧,如果有什么问题请及时跟我反馈,如果你还停留在clearfix的老代码的时候就赶紧更新一下代码吧。


上一篇:无

下一篇:无