</div> 解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 10 .IE6下为什么图片下有空隙产生 解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决. 11.如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style> 12.web标准中定义id与class有什么区别吗? 一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子 三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单. 13. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style> 14.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" c /> <style type="text/css"> <!-- html { 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> 15.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px 16.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" /> 17.怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 1.CSSID的命名 合作伙伴:partner 版权:copyRight 外套:wrap 主导航:mainNav 子导航:subnav 页脚:footer 整个页面:content 页眉:header 页脚:footer 商标:label 标题:title 主导航:mainNav(globalNav) 顶导航:topnav 边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗志:logo 标语:banner 菜单内容1:menu1Content 菜单容量:menuContainer 子菜单:submenu 边导航图标:sidebarIcon 注释:note 面包屑:breadCrumb(即页面所处位置导航提示) 容器:container 内容:content 搜索:search 登陆:login 功能区:shop(如购物车,收银台) 当前的current 2.样式文件命名 主要的:master.css 布局版面:layout.css 专栏:columns.css 文字:font.css 打印样式:print.css 主题:themes.css 4,对于有float的,在最后一定要消除float效果 当然,如果你只为兼容IE6,大可以不必消除 5,减少嵌套,看到很多新手在最开始写的时候往往会有大量的嵌套(表格布局的后遗症吧…) 6,先布大块,在布小块 7,不要有过多的页面注释,我曾经修改的一个页面 完全变形,找了半天也没发现是什么问题,偶尔中删除了其中一条注释,居然好了,这个不清楚是什么原因,希望有高人指点一下。 8,在没有特殊要求的情况下不要设置高度 其实学习CSS+DIV很简单的,只要搞清楚其中的几个属性就可以完成布局。 一,搞清float样式 Div标签的默认宽度为百分之百,也就是说当两个div并列的时候产生的效果是第二个div会在第一个的下一行,但是布局的时候一定会有一行两列的情形出现,这个时候我们就要引入float <div style=”float:left”></div> <div style=”float:left”></div> <div style=”clear:both”></div>(再次啰嗦,一定要记得清除浮动) 这个就是最简单的一行两列 二,一定要搞清楚padding,border,margin的含义 比如有两幅表好的画 画到边框的举例为padding 边框为border 两幅画之间的距离为margin 其中padding算入宽高之内,颜色为background的颜色 边框算入宽高之外border:1px solid #000(1像素黑色实线) Margin没有颜色属性(另外说下,在有float属性的时候在IE6会造成margin双倍的问题,这个时候只要加入display:inline即可解决) 三,关于相对定位,绝对定位和空间定位 绝对定位:position: absolute;有如下两种情况 1,没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点 2,有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下: (1),父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、 Right、Bottom、Left 属性决定 (2),父级有 position 属性,父级的“坐标原始点”为原始点 相对定位:position: relative; 参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,并且会在父块以外占据相同的大小,所以不推荐使用。 空间定位:z-index:数值 当两个板块之间用绝对定位产生上下的时候,可以用z-index来决定哪个板块再上,数值大的位于数值小的上方。 做一个简单的阴影效果: <div style="width:900px;font-size:20px;font-family:'黑体';position:absolute; background-color:#CC0000; color:#00CC00;padding:10px; height:200px; font-weight:bold"> <div style="position:absolute;left:5px;top:5px; z-index:150">阴影效果</div> <div style="position:absolute;left:7px;top:7px;color:#666666;z-index:50">阴影效果</div> </div> *注意一点,当设置left属性的时候不要设置right,同样,设置top之后不要设置bottom 完全理解以上三点之后,就可以进行自己的CSS+DIV制作 最后说一些关于IE6,IE7和FF的兼容问题以及一些小技巧 1,hack方法 FF,IE7可以识别!important IE6,IE7识别* IE6识别_ #hack{width:500px;*width:400px!important;_width:300px} 宽度在FF下为500,IE7下400,IE6下300 就我个人来说,padding值对于FF和IE系列的解析并不相同(个人感觉),为了达到完全一直而使用hack,一般情况下不需要使用这种方法 2,当有float属性时,margin在IE6下双倍,可加入display:inline来解决 3,想要有最小高度并根据内容自伸缩可以用以下方法 设置min-height:500px!important;_height:500px,FF和IE7会以min-height值为最小高度并按内容伸缩,height对于IE6为最小高度并按内容伸缩 4,对于FF想要板块根据页面居中需在父块设置margin:0 auto 5,div标签没有垂直居中的概念,所以当只有一行文字的时候,想要垂直居中只需将line-height设置与height相同即可 6,W3C标准写法: (1)所有卷标元素名称都使用小写 错误 <HTML> <TITLE> <HEAD> <BODY> 正确 <html> <title> <head> <body> (2)所有没有成对的空标签必须以 />结尾 错误:<br> <hr> 正确:<br /> <hr /> (3)不允许使用target="_blank" 在HTML4.01可以使用target="_blank", 但XHTML1.0是不被允许的,你可以改写为 target="new" (4)特殊字符以符号表示 比如空格使用 (5) 正确使用CSS样式表 错误 <style> 正确 <style type="text/css"> (6) 同一个id选择器不可重复使用 (7) 绝对不可省略双引号或单引号 本文为个人原创,部分内容节选自网络,欢迎各位大大指出错误,小弟在此敬礼。 首先先声明,本人学习是根据国外页面CSS文件自行摸索,对很多概念化的东西并不理解,比如盒子模型等,完全不知道是什么意思 再说几点注意事项 1,用DW创建新的页面的时候,会出现一堆英文,如下: <!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"> 此段不可删除,为W3C标准!(记得最开始老师教的时候我问过是什么意思,他老人家告诉我是广告,囧…) 2,各个标签对之间都有默认的margin等值,所以最开始要设置为0 div,p,span,form,ul,ol,li,input {margin:0;padding:0;border:0; } 一,搞清float样式 Div标签的默认宽度为百分之百,也就是说当两个div并列的时候产生的效果是第二个div会在第一个的下一行,但是布局的时候一定会有一行两列的情形出现,这个时候我们就要引入float <div style=”float:left”></div> <div style=”float:left”></div> <div style=”clear:both”></div>(再次啰嗦,一定要记得清除浮动) 这个就是最简单的一行两列 二,一定要搞清楚padding,border,margin的含义 比如有两幅表好的画 画到边框的举例为padding 边框为border 两幅画之间的距离为margin 其中padding算入宽高之内,颜色为background的颜色 边框算入宽高之外border:1px solid #000(1像素黑色实线) Margin没有颜色属性(另外说下,在有float属性的时候在IE6会造成margin双倍的问题,这个时候只要加入display:inline即可解决) 三,关于相对定位,绝对定位和空间定位 绝对定位:position: absolute;有如下两种情况 1,没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点 2,有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下: (1),父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定 (2),父级有 position 属性,父级的“坐标原始点”为原始点 相对定位:position: relative; 参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,并且会在父块以外占据相同的大小,所以不推荐使用。 空间定位:z-index:数值 当两个板块之间用绝对定位产生上下的时候,可以用z-index来决定哪个板块再上,数值大的位于数值小的上方。 做一个简单的阴影效果: <div style="width:900px;font-size:20px;font-family:'黑体';position:absolute; background-color:#CC0000; color:#00CC00;padding:10px; height:200px; font-weight:bold"> <div style="position:absolute;left:5px;top:5px; z-index:150">阴影效果</div> <div style="position:absolute;left:7px;top:7px;color:#666666;z-index:50">阴影效果</div> </div> *注意一点,当设置left属性的时候不要设置right,同样,设置top之后不要设置bottom 完全理解以上三点之后,就可以进行自己的CSS+DIV制作 最后说一些关于IE6,IE7和FF的兼容问题以及一些小技巧 1,hack方法 FF,IE7可以识别!important IE6,IE7识别* IE6识别_ #hack{width:500px;*width:400px!important;_width:300px} 宽度在FF下为500,IE7下400,IE6下300 就我个人来说,padding值对于FF和IE系列的解析并不相同(个人感觉),为了达到完全一直而使用hack,一般情况下不需要使用这种方法 2,当有float属性时,margin在IE6下双倍,可加入display:inline来解决 3,想要有最小高度并根据内容自伸缩可以用以下方法 设置min-height:500px!important;_height:500px,FF和IE7会以min-height值为最小高度并按内容伸缩,height对于IE6为最小高度并按内容伸缩 4,对于FF想要板块根据页面居中需在父块设置margin:0 auto 5,div标签没有垂直居中的概念,所以当只有一行文字的时候,想要垂直居中只需将line-height设置与height相同即可 6,W3C标准写法: (1)所有卷标元素名称都使用小写 错误 <HTML> <TITLE> <HEAD> <BODY> 正确 <html> <title> <head> <body> (2)所有没有成对的空标签必须以 />结尾 错误:<br> <hr> 正确:<br /> <hr /> (3)不允许使用target="_blank" 在HTML4.01可以使用target="_blank", 但XHTML1.0是不被允许的,你可以改写为 target="new" (4)特殊字符以符号表示 比如空格使用 (5) 正确使用CSS样式表 错误 <style> 正确 <style type="text/css"> (6) 同一个id选择器不可重复使用 (7) 绝对不可省略双引号或单引号 本文为个人原创,部分内容节选自网络,欢迎各位大大指出错误,小弟在此敬礼。 CSS对浏览器器的兼容性问题CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。 常见兼容问题: 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以 8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important; 10.IE5 和IE6的BOX解释不一致 IE5下 div{width:300px;margin:0 10px 0 10px;} div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:) 11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题 注意事项: 1、float的div一定要闭合。 例如:(其中floatA、floatB的属性已经设置为float:left; <#div id=\"floatA\" ></#div> <#div id=\"floatB\" ></#div> <#div id=\"NOTfloatC\" ></#div> 这里的NOTfloatC并不希望继续平移,而是希望往下排。 [Page] 这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。 在 <#div class=\"floatB\"></#div> <#div class=\"NOTfloatC\"></#div> 之间加上 <#div class=\"clear\"></#div> 这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。 并且将clear这种样式定义为为如下即可: .clear{ clear:both;} 此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。 例如某一个wrapper如下定义: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 2、margin加倍的问题。 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; 例如: <#div id=\"imfloat\"></#div> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} 3、关于容器的包涵关系 很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。 4、关于高度的问题 如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事) 5、最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于\"!important\"会自动优先解析,然而IE则会忽略.如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过 |