<p>1、居中问题<br> <br>div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;<br> <br>2、高度问题<br> <br>两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的最后,闭和前加一个沉底的空div,对应CSS是:.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}<br> <br>3、clear:both;<br> <br>不想受到float浮动的,就在div中写入clear:both;<br> <br>4、IE浮动 margin产生的双倍距离<br> <br>#box {<br> float:left;<br> width:100px;<br> margin:0 0 0 100px; //这种情况之下IE会产生200px的距离<br> display:inline; //使浮动忽略<br> }<br> <br>5、padding问题<br> <br>FF设置 padding 后,div会增加 height 和 width,但IE不会 (* 标准的 XHTML1.0 定义 dtd 好像一致了)高度控制恰当,或尝试使用 height:100%;宽度减少使用 padding但根据实际经验,一般FF和IE的 padding 不会有太大区别,div 的实际宽 = width + padding ,所以div写全 width 和 padding,width 用实际想要的宽减去 padding 定义。<br> <br>6、div嵌套时 y轴上 padding和 marign的问题<br> <br>FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign<br>IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个<br>FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的距离为0,子marign 作用到 父div 外面<br> <br>7、padding,marign,height,width的傻瓜式解决技巧<br> <br>注意是技巧,不是方法:<br>写好标准头<br> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br> <html xmlns=”http://www.w3.org/1999/xhtml”><br> 高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding<br> <br>8、列表类<br> <br>1. ul标签在FF中默认是有 padding值的,而在IE中只有margin有值<br>先定义 ul {margin:0;padding:0;}<br>2. ul和ol列表缩进问题消除ul、ol等列表的缩进时,样式应写成: {list-style:none;margin:0px;padding:0px;}<br> <br>9、显示类(display:block,inline)<br> <br>1. display:block,inline两个元素<br> display:block; //可以为内嵌元素模拟为块元素<br> display:inline; //实现同一行排列的的效果<br> display:table; //for FF,模拟table的效果<br> display:block 块元素,元素的特点是:<br> 总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度<br> <div>,<p>,<h1>,<form>,<ul> 和 <li> 是块元素的例子<br> display:inline 就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。<span>,<a>,<label>,<input>,<img>,<strong> 和 <em> 是 inline 元素的例子<br>2.鼠标手指状显示<br> 全部用标准的写法 cursor: pointer;<br> <br>10、背景、图片类<br> <br>1. background显示问题<br> 全部注意补齐 width,height 属性<br>2.背景透明问题<br> IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);<br> IE: filter: alpha(opacity=10);<br> FF: opacity:0.6;<br> FF: -moz-opacity:0.10;<br> 最好两个都写,并将opacity属性放在下面<br> <br>11、min-height最小高度的实现(兼容IE6、IE7、FF)<br> <br>作用是:当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果。而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化。<br>#mrjin {<br> background:#ccc;<br> min-height:100px;<br> height:auto !important;<br> height:100px;<br> overflow:visible;<br>}<br> <br>12、著名的 Meyer Reset(重置)<br> <br>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td<br>{ <br> margin: 0; <br> padding: 0; <br> border: 0; <br> outline: 0; <br> font-weight: inherit; <br> font-style: inherit; <br> font-size: 100%; <br> font-family: inherit; <br> vertical-align: baseline; <br> } <br> :focus { <br> outline: 0; <br> } <br> body { <br> line-height: 1; <br> color: black; <br> background: white; <br> } <br> ol, ul { <br> list-style: none; <br> } <br> table { <br> border-collapse: separate; <br> border-spacing: 0; <br> } <br> caption, th, td { <br> text-align: left; <br> font-weight: normal; <br> } <br>blockquote:before, blockquote:after, <br>q:before, q:after { <br> content: ""; <br>} <br>blockquote, q { <br> quotes: "" ""; <br>} <br> <br>13、跨浏览器的CSS透明度<br> <br>.transparent { <br> opacity: 0.7; <br> -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";<br> filter: alpha(opacity=70); <br> -moz-opacity: 0.7; <br> -khtml-opacity: 0.7;<br> <br>14、文字阴影(CSS3)<br> <br>.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }<br> <br>15、Box阴影(CSS3)<br> <br>.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }<br> <br>16、Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)<br> <br><div id="wrap"> <br> <div id="main" class="clearfix"></div> <br></div> <br> <div id="footer"> </div><br>CSS:<br> * { margin:0; padding:0; } <br> html, body, #wrap { height: 100%; } <br> body > #wrap {height: auto; min-height: 100%;} <br> #main { padding-bottom: 150px; } <br> #footer { <br> position: relative; <br> margin-top: -150px; <br> height: 150px; <br> clear:both;} <br> .clearfix:after {content: "."; <br> display: block; <br> height: 0; <br> clear: both; <br> visibility: hidden;} <br> .clearfix {display: inline-block;} <br>* html .clearfix { height: 1%;} <br> .clearfix {display: block;}<br> <br>17、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片<br> <br>iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。内嵌文档时一个完整的页面,有HTML,BODY等属性。这样遇到了一个问题,如果样式表中对BODY定义过背景色/背景图片,那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片:<br>【1】去掉背景色:filter:Chroma(Color=white);<br>举例:<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe><br>【2】去掉背景图片:<br>举例:<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe><br>注意:内嵌页面同时也要增加BODY属性:<br><body bgcolor="transparent" style='background:transparent'><br> <br>18、为什么web标准中无法设置IE浏览器滚动条颜色了?<br> <br>原来样式设置:<br><style type="text/css"><br>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; }<br></style><br>解决办法是将body换成html。<br> <br>19、为什么中火狐浏览器下文本无法撑开容器的高度?<br> <br>标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:<br>div { height:auto!important; height:200px; min-height:200px; }<br> <br>20、如何定义1px左右高度的容器?<br> <br>IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px<br> <br>21、怎么样才能让层显示在FLASH之上呢?<br> <br>解决的办法是给FLASH设置透明:<br><a href="http://www.chinaz.com/">:</a><br><pre lang="html" line="1"><br><param name="wmode" value="transparent" /><br> <br>22、怎样使一个div层居中于浏览器中?<br> <br><style type="text/css"><br><!--<br>div {<br>position:absolute;<br>top:50%;<br>left:50%;<br>margin:-100px 0 0 -100px;<br>width:200px;<br>height:200px;<br>border:1px solid red;<br>}<br>--><br></style><br> <br>23、怎样使div背景透明?<br> <br>首先,需要这两个层都是兄弟关系,其次,这两个层都需要绝对定位。举个例子:<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><meta name="author" content="colinivy" /><br><title> Colinivy's world</title><br><style type="text/css"><br> body {<br> font:normal 12px/30px Verdana; }<br> #test {<br> position:relative;<br> width:400px;<br> height:50px;<br> }<br> #inner {<br> z-index:2;<br> position:absolute;<br> top:10px;<br> left:10px;<br> width:380px;<br> height:30px;<br> color:#003;<br> font-weight:bold;<br> text-align:center;<br> }<br> #transbox {<br> z-index:1;<br> position:absolute;<br> top:0px;<br> left:0px;<br> width:400px;<br> height:50px;<br> background:#eef;<br>border:1px solid #a00;<br> filter:alpha(opacity=40);<br> -moz-opacity:0.4;<br> opacity:0.4;<br> }<br></style><br></head><br><body><br> <div id="test"><br> <div><br><p>这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,</p><br> </div><br> <div id="transbox"></div><br> <div id="inner"><br> BlueIdea,BlueIdea,BlueIdea <br> </div><br> </div><br></body><br></html><br> <br>24、怎样去掉选中时的虚线框?<br> <br>利用οnfοcus="this.blur();"例如:<a href="#" οnfοcus="this.blur();">测试</a><br> <br>25、ie6下png背景显示问题?<br> <br>针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);<br> <br>26、文字与表单对齐方法?<br> <br>设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:<br>body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}<br> <br>27、optgroup标签的用法?<br> <br>optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组:例子:<br><select id="selectId"><br><optgroup label="GROUP ONE"><br><option value="1">one select</option><br><option value="2">two select</option><br></optgroup><br><optgroup label="GROUP TWO"><br><option value="3">three select</option><br><option value="4">four select</option><br></optgroup><br></select><br> <br>28、文字与图片垂直居中对齐方法?<br> <br>为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:<br><p>我要的坚强<img src="i/image.gif" /></p><br>只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.<br> <br>29、文章标题列表中日期居右显示的两种方法?<br> <br>方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:<br>方法A:<br> <p>这是文章标题<span>2010-10-10</span></p><br>然后定义p和span的样式:<br>p{ position:relative}<br>p span{ position:absolute; right:0}<br>方法B:<br><p><span>2010-10-10</span>这是文章标题</p><br>然后定义span右浮动:<br>p span{float:right}<br> <br>30、ie6下max/min-width/height实现?<br> <br>ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.<br> <br>31、空白外边距互相叠加的问题?<br> <br>一般通过添加透明边框或者1px的内边距避免;<br>其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;<br>其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px;<br>例如:<!doctype html><br><html><br><head><br><meta charset="utf-8"><br><title>空白边距叠加demo@Mr.Think</title><br><style><br>body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}<br>div{background:#a40000;margin:10px}<br>div p{background:#eee;margin:15px}<br></style><br></head><br><body><br><div><p>空白边距叠加demo@Mr.Think</p></div><br></body><br></html><br> <br>32、网页设计中的默认字体<br> <br>font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;<br>说明:line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高,对于12px字体,这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。<br> <br>33、浏览器兼容——常用的css hack<br> <br>(1).title{ height:200px;<br> *height:200px;<br> _height:200px; }<br>(2).title{ height:200px;<br> *height:200px !important;<br> *height:200px; }<br>(3).title{ height:200px; }<br> *html.title{ height:200px;}<br> *+html.title{ height:200px;}</p>
浏览器兼容问题及解决办法
最新推荐文章于 2022-12-28 20:00:03 发布