1、居中问题
div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码:
2、高度问题
两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的最后,闭和前加一个沉底的空div,对应CSS是:
1
|
.float_bottom { clear : both ; height : 0px ; font-size : 0px ; padding : 0 ; margin : 0 ; border : 0 ; line-height : 0px ; overflow : hidden ;}
|
|
3、clear:both;
不想受到float浮动的,就在div中写入clear:both;
4、IE浮动 margin产生的双倍距离
07
|
margin : 0 0 0 100px ; //这种情况之下IE会产生 200px 的距离
|
09
|
display : inline ; //使浮动忽略
|
|
5、padding问题
FF设置 padding 后,div会增加 height 和 width,但IE不会 (* 标准的 XHTML1.0 定义 dtd 好像一致了)高度控制恰当,或尝试使用 height:100%;宽度减少使用 padding但根据实际经验,一般FF和IE的 padding 不会有太大区别,div 的实际宽 = width + padding ,所以div写全 width 和 padding,width 用实际想要的宽减去 padding 定义。
6、div嵌套时 y轴上 padding和 marign的问题
FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的距离为0,子marign 作用到 父div 外面
7、padding,marign,height,width的傻瓜式解决技巧
注意是技巧,不是方法:
写好标准头
<!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”>
高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding
8、列表类
1. ul标签在FF中默认是有 padding值的,而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题消除ul、ol等列表的缩进时,样式应写成: {list-style:none;margin:0px;padding:0px;}
9、显示类(display:block,inline)
1. display:block,inline两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素,元素的特点是:
总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度
<div>,<p>,<h1>,<form>,<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。<span>,<a>,<label>,<input>,<img>,<strong> 和 <em> 是 inline 元素的例子
2.鼠标手指状显示
全部用标准的写法 cursor: pointer;
10、背景、图片类
1. background显示问题
全部注意补齐 width,height 属性
2.背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写,并将opacity属性放在下面
11、min-height最小高度的实现(兼容IE6、IE7、FF)
作用是:当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果。而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化。
07
|
height : auto !important ;
|
|
12、著名的 Meyer Reset(重置)
01
|
html, body, div, span, applet, object, iframe,h 1 , h 2 , h 3 , h 4 , h 5 , h 6 ,p, blockquote, pre ,a, abbr,
|
02
|
acronym, address, big, cite, code ,del, dfn, em, font, img, ins, kbd, q, s, samp, small , strike,
|
03
|
strong, sub , sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption , tbody, tfoot, thead, tr, th, td
|
23
|
vertical-align : baseline ;
|
51
|
border-collapse : separate ;
|
65
|
blockquote:before, blockquote:after,
|
|
13、跨浏览器的CSS透明度
05
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ;
|
07
|
filter: alpha(opacity= 70 );
|
|
14、文字阴影(CSS3)
1
|
.text { text-shadow : 1px 1px 1px #666 ; filter: Shadow(Color= #666666 , Direction= 135 , Strength= 5 ); }
|
|
15、Box阴影(CSS3)
1
|
.box { box-shadow: 5px 5px 5px #666 ; -moz-box-shadow: 5px 5px 5px #666 ; -webkit-box-shadow: 5px 5px 5px #666 ; }
|
|
16、Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
03
|
<div id= "main" class= "clearfix" ></div>
|
07
|
<div id= "footer" > </div>
|
11
|
* { margin : 0 ; padding : 0 ; }
|
13
|
html, body, #wrap { height : 100% ; }
|
15
|
body > #wrap { height : auto ; min-height : 100% ;}
|
17
|
#main { padding-bottom : 150px ; }
|
29
|
.clearfix:after { content : "." ;
|
39
|
.clearfix { display : inline- block ;}
|
41
|
* html .clearfix { height : 1% ;}
|
43
|
.clearfix { display : block ;}
|
|
17、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。内嵌文档时一个完整的页面,有HTML,BODY等属性。这样遇到了一个问题,如果样式表中对BODY定义过背景色/背景图片,那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片:
【1】去掉背景色:filter:Chroma(Color=white);
举例:<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景图片:
举例:<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>
注意:内嵌页面同时也要增加BODY属性:
<body bgcolor="transparent" style='background:transparent'>
18、为什么web标准中无法设置IE浏览器滚动条颜色了?
原来样式设置:
2
|
scrollbar-face- color : #f6f6f6 ;
|
3
|
scrollbar-highlight- color : #fff ;
|
4
|
scrollbar-shadow- color : #eeeeee ;
|
5
|
scrollbar -3 dlight- color : #eeeeee ;
|
6
|
scrollbar-arrow- color : #000 ;
|
7
|
scrollbar-track- color : #fff ;
|
8
|
scrollbar-darkshadow- color : #fff ; }
|
|
解决办法是将body换成html。
19、为什么中火狐浏览器下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
1
|
div { height:auto!important; height:200px; min-height:200px; }
|
|
20、如何定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
21、怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明:
<a href="http://www.chinaz.com/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />
22、怎样使一个div层居中于浏览器中?
09
|
margin : -100px 0 0 -100px ;
|
|
23、怎样使div背景透明?
首先,需要这两个层都是兄弟关系,其次,这两个层都需要绝对定位。举个例子:
03
|
font : normal 12px / 30px Verdana ; }
|
53
|
border : 1px solid #a00 ;
|
55
|
filter:alpha(opacity= 40 );
|
|
<p>这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,</p>
24、怎样去掉选中时的虚线框?
利用οnfοcus="this.blur();"例如:<a href="#" οnfοcus="this.blur();">测试</a>
25、ie6下png背景显示问题?
针对ie6下png背景显示问题,CSS中可以这样解决:
1
|
_background : none ;_filter:progid
|
2
|
:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod= crop , src=’http://www. 0351 zhuangxiu.com/uploads/images/bj.jpg’);
|
|
26、文字与表单对齐方法?
设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:
1
|
body,button,input,select,textarea{ font : 12px / 1.5 tahoma , arial , sans-serif ; vertical-align : middle }
|
|
27、optgroup标签的用法?
optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组:例子:
<select id="selectId">
<optgroup label="GROUP ONE">
<option value="1">one select</option>
<option value="2">two select</option>
</optgroup>
<optgroup label="GROUP TWO">
<option value="3">three select</option>
<option value="4">four select</option>
</optgroup>
</select>
28、文字与图片垂直居中对齐方法?
为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
<p>我要的坚强<img src="i/image.gif" /></p>
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.
29、文章标题列表中日期居右显示的两种方法?
方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:
方法A:
<p>这是文章标题<span>2010-10-10</span></p>
然后定义p和span的样式:
p{ position:relative}
p span{ position:absolute; right:0}
方法B:
<p><span>2010-10-10</span>这是文章标题</p>
然后定义span右浮动:
p span{float:right}
30、ie6下max/min-width/height实现?
ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.
31、空白外边距互相叠加的问题?
一般通过添加透明边框或者1px的内边距避免;
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px;
例如:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白边距叠加demo@Mr.Think</title>
<style>
body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白边距叠加demo@Mr.Think</p></div>
</body>
</html>
32、网页设计中的默认字体
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
说明:line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高,对于12px字体,这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。
33、浏览器兼容——常用的css hack
查看源码打印代码帮助
11
|
* height : 200px !important ;
|
16
|
.title{ height : 200px ; }
|
18
|
*html.title{ height : 200px ;}
|
20
|
*+html.title{ height : 200px ;}
|
|
html css常见浏览器兼容问题总结相关推荐
- JavaScript解决常见浏览器兼容问题
JavaScript解决常见浏览器兼容问题 我们提倡尽可能使用CSS,而且我们常常能做到这一点.现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计.但是有时候,某些网页元素在 ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
为什么会有兼容问题? 由于浏览器种类众多,不同的浏览器其内核亦不尽相同,故各个浏览器对网页的解析有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览 ...
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...
- 关于CSS中浏览器兼容的问题总结二
CSS对浏览器的兼容性有时让人感觉比较麻烦,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xht ...
- 12种Javascript解决常见浏览器兼容问题的方法
们提倡尽可能使用CSS,而且我们常常能做到这一点.现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计.但是有时候,某些网页元素在不同的浏览器会出现不同. 如果你不知道原因,不 ...
- 关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
- CSS 多浏览器兼容又一方案
什么是浏览器HACK:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼 ...
- div+css 布局浏览器兼容
第一次写div + css 的站点,进度相当的慢,而且项目也赶得挺急的,整个人被操劳的很累,做了几天后我把所学到的,一些技巧和网上搜罗 到了综合下发出来,希望对做设计的朋友有帮助! 1.为什么在不同的 ...
最新文章
- C# 加载图片image --(C#)Image.FromFile 方法会锁住文件的原因及可能的解决方法
- MySQL主从复制Linux实现
- Linux常用端口查询命令及常见端口和端口分类
- mac下用vs code编写c++程序
- 别再瞎搞了,处理Java异常的10个最佳实践
- java软件工程师自我评价_电子技术研发工程师简历自我评价填写样本
- Array.prototype.slice.call()如何工作?
- music的matlab程序,MUSIC算法matlab程序
- matlab实现一阶低通滤波器,matlab仿真一阶低通滤波器幅频特性和相频特性[计算机类]...
- HDU 2825 AC自动机+状压dp
- Android SQLite Google 官方用法
- 项目实战:如何制作报表?
- Office2016 Excel 快捷键备忘录
- 使用gdiplus显示gif图片
- Ubuntu系统出现kernel panic
- java 秒表_JAVA计时器秒表程序代码
- 传奇微端服务器客户端需要哪些文件,想开服需要了解和准备什么?
- VMware-workstation中文版修改成英文版简单方法
- Unity+Android 打开安卓文件管理器,并拿到文件的真实路径
- Ebox 的OS定制
热门文章
- Android 设置横屏,竖屏或者禁止横屏的方法
- waitfor 语句
- 金融科技之NLP:上市公司新闻标题分类
- 2020 高考延期:全国考生多复习 30 天,北京除外
- 【C++】程序员的屠龙母鸡:二叉树进阶OJ题详解
- python用product函数来生成N位二进制数的全排列
- Java程序设计(八)----输出英文字母表、希腊字母表
- 全面理解哈希函数及其应用
- 入门二叉搜索树的世界
- 如何运用CRM牢牢抓住客户?