- 浏览: 311927 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
spring_springmvc:
可以参考最新的文档:如何在eclipse jee中检出项目并转 ...
Eclipse更改默认字符集 设置UTF-8 -
u011344897:
谢谢了
二级树形菜单 -
tywo45:
博主,您好!请问有没有办法在切图生成html后,让图片全屏。
PS切图 相关技巧 -
rebecca:
rebecca 写道明白了,是对双引号的那为啥"ty ...
解析JS的转义 \ 字符 -
rebecca:
明白了,是对双引号的
解析JS的转义 \ 字符
其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决。
下面是14条特殊情况仅供参考:
1.
文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff
下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height
。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。
2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。
3.横向上的撑破容器问题,。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。
小实验:有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。
a.<div
style=”border:1px solid red;height:10px”></div> b. <div
style=”border:1px solid red;width:10px”></div>
c.
<div style=”border:1px solid red;float:left”></div> d.
<div style=”border:1px solid red;overflow:hidden”></div>
上
面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,<div
style=”height:10px;overflow:hidden”></div>,小height
值要配合overflow:hidden一起使用。实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。
4.最被痛恨的,double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。
解决方案,给浮动容器定义display:inline。
5.mirror
margin
bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。
padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。
引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。
6. 吞吃现象。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
8.img 下的留白,大家看这段代码有啥问题:
<div>
<img src=”" mce_src=”" />
</div>
把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
<div>
<img src=”" mce_src=”" /></div>
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。
9.
失去line-height。<div style=”line-height:20px”><img
/>文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是<img
/>这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。
引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。
10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>
11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案:给overflow:hidden加position:relative或者position: absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。
12.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。
13.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。
14.width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。opera这点倒学乖了跟了ie。
-----------------------------------------------------------------------------------------------------------------
ie的float bug(ie6,ie7)使前端工程师们为之困扰,最常见的现象就是:当浮动元素的父级元素在拖动滚动条的时候出现边框的缺失,对于此类问题的解决方案就是使浮动元素获得布局.
在诸多的情况中,因为页面需要宽度自由伸缩而不能申明宽度为固定值,但我们可以设置*height:1%;,*在这里可谓是举足轻 重,因为*只能被ie7及以下版本解析,ie8并不识别此类写法,所以可以使用这个写法来区别ie8和其他版本号的ie浏览器.对网上流行的ie8 beta1的hack,也算是一个补充.
一些常用的hack测试
* html p {color:red;} 支持 IE6 不支持FF IE7 IE8b
*+html p {color:red;} 支持 IE7 IE8b 不支持FF IE6
p {*color:red;} 支持 IE7 IE6 不支持FF IE8b
IE8 中增加了 CSS3 中的子串匹配的属性选择器(substring matching attribute selectors),具体规则与正则中的匹配很相似:
E[att^=’val’] //子串以’val’ 开始
E[att$=’val’] //子串以’val’ 结束
E[att*=’val’] //子串中包含’val’
IE8 支持绝大多数基本的 CSS2.1 选择器,不支持的包括但不限于:[:first-line] 、[:first-letter]。
对于 CSS2.1 中的 generated content 部分,即通过使用伪元素 :before 和 :after 添加文本内容,IE8 中支持 并未完全 。
而对于几乎在其他浏览器中都支持的 opacity 和 RGBA ,IE8 中依旧没有支持。
对于原来用来区分 IE 的 HACK 在 IE8 中基本失效(比如*property:value、*property:value等)。
原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。
原有 IE 的 z-index bug 在 IE8 中依旧存在。
IE8 中产生新的 bug:当 line-heigth 小于正常值时,超出的部分将被裁切掉。
IE8 中依然不支持 display:table 。
IE8 中依然不支持 border 的 transparent 值。
IE8 中 @import 只支持三层嵌套。
IE8中 border的 transparent 不被支持
IE8中产生新的BUG:line-heigth BUG
/*/p{ color:#1e90ff}/*/ 只针对IE8的hack,可以是属性也可以是类
------------------------------------------------------------------------------------------
BUG描述:
页面中某DIV使用了position:relative,结合top=-25px等元素定位。在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动。
分析:
这是IE6一个已知的BUG:当某position:relative元素 被带有overflow:auto/scroll属性的块级元素包含时,会表现出postion:absolute的行为。
解决方法:
1.为包含块元素添加属性position:relative 。
2.把该元素的position:relative属性去掉,使用默认的static定位,并通过margin-top等属性实现类似的效果。
————————————————————————————————————————————————————————————————
ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种
hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察(译自www.sitepoint.com)中的10个修
复ie6下bug技巧:
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE,并且我们推荐使用strict 版本,比如:
或者,对于XHTML使用:
你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。
2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。显然,你需要非常小心点儿,因为绝对定位的子节点可能会因此重新定位。
3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,尽管这不是必须的,你的CSS仍然是有效的。
4. 将一个元素设置为hasLayout
很
多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。
这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设
置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。
最简单的设置
hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。我们推荐设置实际尺寸,但是问题是
这是不现实的,你可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候hasLayout已经被启
用。
5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
.确保所有的元素使用”display:inline;”
.在最后一个元素上使用一个”margin-right:-3px;”
.为浮动元素的最后一个条目使用一个条件注释,比如:
.在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。
>>>>>>你还可以访问positioniseverything.net 查看该问题的完整介绍。
6. 在可点击和悬停的元素上只使用<a>标签
IE6只认识对a标签的CSS hover效果。
你也可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是<a>标签比其它方案更可靠。
7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:
min-height: 20em;
height: auto !important; /* 所有浏览器都理解这段代码 */
height: 20em; /* IE6 错误的使用这个值 /*
}
IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。
另外一个可选的方法是使用高级选择器,比如e.g.
min-height: 20em;
height: 20em;
}
/* IE6 无视下面的代码*/
#element[id] {
height: auto;
}
8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小,才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比,比如:
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}
9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕,而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行,那么一般在其它浏览器就不会有问题。
10. 重构你的代码
经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码,但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。
-------------------------------------------------------------------------------------------------------
让IE6支持PNG格式的图片
用法:
先复制下面的代码在记事本中,然后另存为pngbehavior.htc(名字可以任意):
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>
/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
* for WebFX (http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.02
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
* 2004-05-09 When printing revert to original
*
*/
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;
if (supported) fixImage();
function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
function afterPrint() {
isPrinting = false;
fixImage();
}
</script>
</public:component>
最后在你的css文件里面加上这么一段代码:
img {
behavior: url("pngbehavior.htc");
}
一切就好了!!你所有的png图片在ie6下都会被支持了!!
发表评论
-
html的per标签 - 预格式文本
2011-09-22 16:27 43131.html的per标签:(预格式文本) <pr ... -
font-family:inherit;?CSS小归纳ing
2011-09-21 22:28 78411.font-family:inherit;是什么意思? ... -
'font:12px/1.5 Tahoma' 其中12px/1.5表示什么
2011-09-20 15:12 3274其中12px/1.5表示什么? 其中12px/1 ... -
1.控制DIV属性实例 (一)
2011-09-20 13:42 1234<!DOCTYPE html PUBLIC " ... -
二级横向菜单
2011-09-16 16:41 1753二级横向菜单 html如下: ... -
二级树形菜单
2011-09-16 14:45 2703二级树形菜单,学习了 html代码 & ... -
命名规则有利于SEO
2011-09-16 14:13 835不断改进自己的习惯,使其规范化!!! 搜索引擎优化 ... -
TABLE超出宽度自动换行CSS隐藏
2010-10-09 22:40 14395IE浏览器 一、使用 table-layout:fix ... -
背景颜色
2010-05-27 09:49 849喜欢的导航背景颜色值:background:#eff; ba ... -
CSS Hack 汇总快查(z)
2010-03-20 23:17 962屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) ... -
outline-style 设计div外围样式时!
2010-03-18 21:08 1376//div {outline-style :sol ... -
css sprites(很好很强大)(zz)
2010-03-18 17:12 1036最近,用到这个技术, ... -
关于CSS“ 显示一张图片的部分图片”问题
2010-03-18 15:49 3918废话少说,举例 原本图片, HTM ... -
CSS关于“文本超出范围隐藏”问题
2010-03-18 15:32 2748老遇到的问题,缺乏总结,故今天总结,加强记忆。举例 ... -
横向导航学习
2008-11-15 18:29 1590(一)今天学习了一下横向导航设计,利用 CSS 布 ...
相关推荐
解决css3圆角特性不兼容ie6,ie7,ie8等问题,让ie9一下版本完美兼容css3圆角。实现非常简单
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。 直接上例子: 复制...
可是真有些日子没有写DIV+CSS了,而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目),所以这次开发中不可避免的碰见了几个问题,尤其是在IE下的 z-index 问题很有意思,所以整理了一些资料和总结分享给大家…注...
Shop7z网上购物系统具有大的关键词设置功能,整个网站可以设置其搜索关键词,在SEO方面表现出众,可以设置任意个商品不同的搜索关键字和描述,同时经过优化过程序在搜索引擎优化上有了更大的飞跃,用户只需要通过在...
项目开发过程中所遇到的问题与解决方法,包括:ie兼容,z-index原理解析等
上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给大家:利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单。 实现思路通俗易懂: 首先,我们要...
一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志:display: flexbox; or the flex() function or flex-pack property ...没有大的改动
企业网站管理系统全DIV+CSS模板,多浏览器适应,完美兼容IE6-IE8,火狐,谷歌等符合标准的浏览器,模板样式集中在一个CSS样式中,内容与样式完全分离,方便网站设计人员开发模板与管理。系统较为安全,以设计防注入,...
微思象棋播放器是一个基于JQuery开发的简单迷你并且高效的在线中国象棋棋谱播放器,基于网络访问并且兼容IE 7.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+,并对IE 6.0提供部分支持。微思象棋播放器完全...
侧栏管理 ---- 兼容IE8 问题修正 ---- [影响:低] fix tag返回超过50条的问题 问题修正 ---- [影响:高] fix rss分类出错的问题 问题修正 ---- [影响:中] fix InstallPlugin_xxx会被执行二次的问题 问题修正 ---- ...
2.网站页面Div+Css兼容目前所有主流浏览器,Ie6+,Chrome,火狐,Opera,Safari等,HTML代码简洁规范通过W3C,更加有利于SEO推广。 3.后台管理界面,操作便捷、友好、更具人性化。 4.网站支持无限的语言种类、无限...
01) 兼容: 天衣无缝的兼容性能,可完美运行于IE5.5\6+*、Firefox X+、Chrome X+、Safari X+、Opera X+等浏览器。 02) 快速: 基于JavaScript原生态开发,运行快速高效、系统全部主体文件50多KB能极快载入启动。 03)...
4,兼容IE、火狐各大常用浏览器,打开网页不变形 5,集成搜索引擎蜘蛛来访记录系统2.0,更好了解搜索引擎蜘蛛来访情况 6,网站导航实现自主管理,可自由添加、删除、隐藏栏目 7,管理员权限可分配,方便控制员工管理...
select标签美化,支持空白处点击显示隐藏选项,目前测试过兼容Firefox、Chrome、IE5及以上,原来找到这个方案不支持空白点击事件,后面改好了测试了没问题,难免会有些bug,如果遇到需要优化欢迎交流!
改装换肤而造成灵格斯不能正常显示的情况, 请切换窗口风格到"无"即可解决.# 兼容 Windows Vista, 可支持在 Vista 和 IE7 中屏幕取词屏幕取词引擎从底层解决了安全问题, 完全兼容Vista, 即使在IE7保护模式下, 也可...
1、修复IE6静止定位的对话框导致页面变长的问题 v2.1.0 1、 增加menuBtn参数, 支持让对话框在指定元素附近弹出(菜单模式) 2、 剔除鸡肋参数'parent',框架相互调用请用javascript原生方法 3、 剔除对话框关闭后...
在FIREFOX IE7 IE6中我测了,没有问题,我想有很多都也在找这样的代码,贴出来和大家分享吧! 代码如下:;border:1px solid #000;right:0; id>子鼠测试.</a></div> //这一行写了这个DIV是绝对定位,最好再...
问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性...
加强了对GBK的兼容性,对于绝大多数常用字转换没问题。还可以 自行设定对冷僻字的转换,按词汇进行转换。同时可以设置读入文本或者粘贴文本时 自动把Big5码文本转换为GB码。支持多文件操作。 2、HTML->TEXT。可以...