- 浏览: 3100723 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (372)
- diy (4)
- linux (19)
- 杂项 (30)
- Swing (21)
- Java2D (21)
- Java3D (5)
- JavaIO (9)
- Java通讯 (5)
- Java设计模式 (3)
- Java多媒体 (0)
- Java算法 (7)
- Spring&EJB (29)
- Javaoffice (4)
- web前端 (23)
- javascript (1)
- php基础 (1)
- eclipse (3)
- 网站相关 (3)
- Apache (4)
- seo (12)
- db (28)
- server (3)
- api (4)
- 异常 (12)
- 计算机网络词汇表 (3)
- 随想录 (52)
- 收藏 (17)
- 犹太人的智慧 (3)
- 多线程 (1)
- jfreechart (7)
- Test (1)
- SorLib (30)
- ruby on rails (1)
最新评论
-
houyutao:
二三四都是错的空字符串也被匹配,*应该改成+
Java中判断字符串是否为数字的五种方法 -
mingyun:
但是 java.util.ArrayList 实现了 remo ...
java.lang.UnsupportedOperationException 解决方案 -
mingyun:
1.因为 Arrays.asList 返回的是 Arrays内 ...
java.lang.UnsupportedOperationException 解决方案 -
leolu007:
用java8新特性String testStr = " ...
java.lang.UnsupportedOperationException 解决方案 -
zhaohuaxishiwzw:
我之前所在的项目就是日本一家证券公司的项目。完全使用的是j2e ...
抛弃EJB(EJB2.0,EJB3.0,EJB4.0)
1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景
a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.
7. BOX模型解释不一致问题
在FF和IE中的BOX模型解释不一致导致相差2px解决技巧:div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
9.最狠的手段 - !important
如果实在没有办法解决一些细节问题,可以用这个技巧.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过
10.IE,FF的默认值问题
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。
我们都知道,浏览器在显示网页的时候,都会根据网页的css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现 FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。
11.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
12.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入
的技巧来解决
13.为什么IE6下容器的宽度和FF解释不同
问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考相关资料。
IE6,IE7,FF
IE7.0出来了,对CSS的支持又有新问题。浏览器多了,网Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK,不过没有上面这样简洁。
第二种,是使用IE专用的条件注释
第三种,css filter的办法,以下为经典从国外网站翻译过来的。.
新建一个css样式如下:
新建一个div,并使用前面定义的css的样式:
在body表现这里加入lang属性,中文为zh:
现在对div元素再定义一个样式:
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种,简洁,兼容性比较好
div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景
a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
<style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>
4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.
7. BOX模型解释不一致问题
在FF和IE中的BOX模型解释不一致导致相差2px解决技巧:div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写 margin:xx px!important;#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
9.最狠的手段 - !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 这句放置在另一句之上,上面已经提过
10.IE,FF的默认值问题
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。
我们都知道,浏览器在显示网页的时候,都会根据网页的css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现 FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。
11.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
{ height:auto!important; height:200px; min-height:200px; }
12.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入
的技巧来解决
<style type="text/css"> <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --> </style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ </scrīpt>
13.为什么IE6下容器的宽度和FF解释不同
<?xml version="1.0" encoding="gb2312"?> <!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" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { cursor:pointer; width:200px; height:200px; border:10px solid red } --> </style> <div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div>
问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考相关资料。
IE6,IE7,FF
IE7.0出来了,对CSS的支持又有新问题。浏览器多了,网Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK,不过没有上面这样简洁。
#example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */
第二种,是使用IE专用的条件注释
<!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]> <!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->
<!--[if lte IE 6]> <!-- 适合于IE6及一下 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
第三种,css filter的办法,以下为经典从国外网站翻译过来的。.
新建一个css样式如下:
#item { width: 200px; height: 200px; background: red; }
新建一个div,并使用前面定义的css的样式:
<div id="item">some text here</div>
在body表现这里加入lang属性,中文为zh:
<body lang="en">
现在对div元素再定义一个样式:
*:lang(en) #item{ background:green !important; }
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:
#item:empty { background: green !important }
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种,简洁,兼容性比较好
发表评论
-
JavaScript 实现MD5算法
2011-03-22 10:48 1672对MD5算法简要的叙述可以为:MD5以512位分组来处理输入的 ... -
IE7 window.close()
2011-03-22 10:44 1309window.opener=null; // 不能少,否则依然 ... -
利用CSS使 a超级链接无边框
2011-01-06 16:00 9211我们在给图片加上超级链接时,发现图片上总是有一个超级链接的边框 ... -
Border style的使用
2010-12-17 14:12 1524使用方法: div{ border:1px soli ... -
域名解析中记录类型的作用
2010-12-05 20:42 3344什么是域名解析:域名解析就是域名到IP地址的转换过程。IP地址 ... -
HTML 转义字符串
2010-11-04 18:23 2371为什么要用转义字符串? HTML中<,>,& ... -
JavaScript Number函数
2010-11-04 15:11 1801Number的用法非常简单直接,就是将一个Javascript ... -
用Joomla搭建网站推荐安装的插件
2010-10-09 17:04 42211.网站安全插件 plgSystemJ ... -
Servlet的特点和优势
2010-09-02 15:43 10335Servlet是用Java编写的Serve ... -
新手究竟该如何学习Joomla
2010-08-31 17:21 3682Joomla是一套自助式的内容管理系统,可以方便的帮助我们建立 ... -
颜色理论
2010-08-15 13:25 2039应用色彩学 由于生长在一个充满着色彩的世界,色彩一直刺激我们的 ... -
<!DOCTYPE>的作用和使用
2010-08-13 14:01 5004当您打开网易,新浪等网站的任何一个页面的源码时,第一行都会看到 ... -
Javascript时钟
2010-08-11 17:24 1539一个Javascript编写的时钟。 运行效果如下图: 代 ... -
页面显示器代码效果
2010-08-11 17:19 2087我们在光顾一些特效网站时,为了展示特显,网站经常是让我们直接运 ... -
利用CSS生成精美细线Table表格
2010-08-10 17:31 11610精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面 ... -
DIV的Position属性和DIV嵌套DIV
2010-08-10 10:58 376031.前言 我们在利用div+css ... -
10个设计师戒律
2010-08-05 14:09 1217第一条: 不可抄袭他人之创意,不论有何前提; Not to c ... -
10个WEB设计戒律
2010-08-05 14:08 13371. 不可滥用 Flash,Adobe ... -
JavaScript树形目录 收集整理
2010-07-29 15:14 10234Javascript是Web开发常用的工具,如果自己开发,是比 ... -
DIV+CSS 圆角边框
2010-07-13 17:10 6012利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DI ...
相关推荐
css在firefox IE的兼容性(案例分析及解决方案) 12个常见 兼容性小例子(html文件附说明)
javascript和css在IE和Firefox中的不同点及解决兼容性的方案,一共有二十五点
CSS兼容IE和Firefox的技巧集合,很多常见的bug解决方案!
min-height在Firefox里有效,但IE无法识别。 可以使用下面这个解决方案: 复制代码代码如下: .div_class{ min-height:30px; height:auto !important; height:30px; } 第一行设置 min-height:30px;对Firefox有效;...
IE6中 PNG 背景透明的最佳解决方案 兼容IE6和Firefox的PNG背景透明CSS代码 IE6下png背景不透明问题的综合拓展
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE...解决方案是在这个div里面加上display:inline; 例如: 复制代码代码如下: <#div id=”imfloat”> 相
} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: <div id=cnbruce>margin: 0 auto 看看内容居中否</div> 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明...
span设置宽度后,通过试验以后发现,无效,无论是在Firefox还 是IE中都无效,原因是CSS中的width属性并不总是有效的,看完本文或许会得到解决方法
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决...
做web前端工作的人员,需要测试页面在各个浏览器不同版本上的CSS或JS效果,如IE下要测试:IE6、IE7、IE8中的效果;但是各个浏览器只能在一台机器上面安装一个版本或升级到更高版本,这就给测试工作带来了很大的麻烦...
拿浮动布局来说,你算好的宽度在Firefox以及 IE7、IE8下可能是正常的,拿到IE6里就会发现不该换行的时候它却换行了。 然而,不管HTML页面设计人员怎么骂微软,网页还是要做的。我这里就以自己的经验给大家介绍一些...
很早就在这里看到过解决方案,与嗷嗷讨论后发现这个方案还是很可靠的。当然,唯一的缺点就是每一个属性都要去Hack,但我在很多实践中,只用‘修正’1-2个属性就可以了。
当前主流浏览器中,chrome,firefox,ie7,8等想要固定一个元素位置,不随内容的滚动而滚动,众所周知,css中position: fixed;即可解决。
图片旋转效果的研究最近在项目中需要做图片的旋转功能,我研究了...但是支持css3的浏览器只有chrome,firefox3.6 ,safari,ie浏览器是不支持的。那么IE下该怎么处理呢?于是就有了下面的一种方案 2)在IE下通过滤镜来
其它请参考:CSS hack 针对IE6,IE7,firefox显示不同效果 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行...
只能在Chrome 85 +,Chrome Android 85+和Opera 71+上支持CSS content-visibility ,但不幸的是,Firefox,Safari和IE不支持CSS content-visibility ,请参阅 。 除IE之外, Intersection Observer API几乎支持所有...
五、firefox无法显示背景图片:解决方案 ASP.NET 一、 控件连接数据库 二. 从excel导入数据到数据库 比较 一、Web Application Projects和Web Site Projects两种编程模型比较 疑难问题解决 一.密码最短长度...