Tags
-
Recent Posts
Recent Comments
Archives
Categories
Category Archives: css
ie6 iframe加载空白
最近做项目，需要用到弹出层，然后弹出层中放入IFRAME，但是发现在IE6下现实空白。 解决方案总结： 1. 不使用 a 标签来触发onclick事件 2. a 标签的 href =”###” 而不使用 href=”javascript://” 和 href=”javascript:void(0)” 3. 在 click 事件的处理函数中添加 return 语句： onclick=”work(); return false;” 【强烈推荐】 最简单的解决方案是不用a触发点击事件。
Posted in css
Leave a comment
解决ie margin 两倍
<style> #div_1 { background: #F00; overflow: auto; zoom: 1; } #div_2 { float: left; width: 100px; height: 100px; margin-left:100px; background: #FF0; /* display: inline; */ } </style> <div id=”div_1″> <div id=”div_2″></div> </div> 触发条件： 1、父元素包含子元素 2、子元素设置了浮动（float） 3、子元素设置了外边距（margin） 4、浮动方向和边距方向一致 解决方法： IE6下看，#div_2的左边距会变成200PX，解决方法就是给#div_2加上display: inline; … Continue reading
Posted in css
Leave a comment
ie6设置FLOAT换行解决
当有时候设置FLOAT：right时，某些DIV会换行，这时候只需要将具有浮动属性的DIV放在没有FLOAT的DIV之前就可以了，如： <div><img src=”images/logo.gif” width=”216″ height=”48″ alt=”logo” /><div><a href=”#”>/CONTACT US</a><a href=”#”>/SITEMAP</a></div></div> 改为： <div><div><a href=”#”>/CONTACT US</a><a href=”#”>/SITEMAP</a></div><img src=”images/logo.gif” width=”216″ height=”48″ alt=”logo” /></div>
Posted in css
Leave a comment
修正IE6下PNG背景白色问题
IE6对PNG的图片唯一的缺陷就在于背景色如果是透明的话，会显示白色。可以使用下面的这段脚本来FIX。 var clear=”images/clear.gif” //path to clear.gif pngfix=function(){var els=document.getElementsByTagName(‘*’);var i_p=/\.png/i;var i=els.length;while (i– >0){var el=els[i];var es=el.style;if(el.src&&el.src.match(i_p)&&es.filter==”){el.height = el.height;el.width = el.width;es.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+el.src+”‘,sizingMethod=’crop’)”;el.src = clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(i_p)){var path=elb.split(‘”‘);var rep=(el.currentStyle.backgroundRepeat==’no-repeat’)?’crop’:’scale’;es.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+path[1]+”‘,sizingMethod=’”+rep+”‘)”;es.height=el.clientHeight+’px’;es.backgroundImage=”none”;}}if (el.currentStyle.position!=’absolute’ && !es.filter && !el.tagName.match(/(body|html|script)/gi)) es.position=”relative”;if (es.filter&&el.currentStyle.position==”relative”) es.position=”static”;}} window.attachEvent(‘onload’,pngfix);
Posted in css, js
Leave a comment
IE浏览器下的CSS常见HACK
HTML部分 <!–[if lte IE 6]>……<![endif]–> IE6及其以下版本可见 <!–[if lte IE 7]>……<![endif]–> IE7及其以下版本可见 <!–[if IE 6]>……<![endif]–> 只有IE6版本可见 <!–[if !IE]>……<![endif]–> 非IE版本可见 <!–[if it IE 8]……<![endif]–> IE8以下版本可见 <!–[if gte IE 7]>……<![endif]–> IE7及其以上版本可见 CSS部分 .all IE{property:value\9;} .gte IE 8{property:value\0;} .lte IE 7{*property:value;} .IE 8/9{property:value\0;} .IE … Continue reading
Posted in css
Leave a comment
ie6支持position:fixed
如何解决“振动”的问题？显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理 css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。 解决此问题的技巧 就是使用background-attachment:fixed为body或html元素添加一个 background-image。这就会强制页面 在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！ .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;} .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;} .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;} .fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;} /* 上面的是除了IE6的主流浏览器通用的方法 */ * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;} * html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} * html .fixed- right /* IE6 右侧固定 * / {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));} * html .fixed- bottom /* IE6 底部固定 * /{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} * html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));} 简单测试代码如下： <!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”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>IE6 position:fixed 始终浮动在网页右下角的网页特效代码</title> <style … Continue reading
Posted in css
Leave a comment
IE的IF条件
<!–[if !IE]>除IE外都可识别<![endif]–> <!–[if IE]> 所有的IE可识别 <![endif]–> <!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–> <!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–> <!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–> <!–[if IE 6]> 仅IE6可识别 <![endif]–> <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–> <!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–> <!–[if … Continue reading
Posted in css
Leave a comment
颜色代码
please visit this page #FFFFFF #FFFFF0 #FFFFE0 #FFFF00 #FFFAFA #FFFAF0 #FFFACD #FFF8DC #FFF68F #FFF5EE #FFF0F5 #FFEFDB #FFEFD5 #FFEC8B #FFEBCD #FFE7BA #FFE4E1 #FFE4C4 #FFE4B5 #FFE1FF #FFDEAD #FFDAB9 #FFD700 #FFD39B #FFC1C1 #FFC125 #FFC0CB #FFBBFF #FFB90F #FFB6C1 #FFB5C5 #FFAEB9 #FFA54F #FFA500 #FFA07A #FF8C69 … Continue reading
Posted in css
Leave a comment
css定位
CSS position 属性 定义和用法 position 属性规定元素的定位类型。 说明 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 默认值： static 继承性： no 版本： CSS2 JavaScript 语法： object.style.position=”absolute” 实例 定位 h2 元素： h2 { position:absolute; left:100px; top:150px; } 浏览器支持 所有主流浏览器都支持 position 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。 可能的值 值 描述 … Continue reading
dom marginleft
HTML DOM marginLeft 属性 定义和用法 marginLeft 属性设置元素的左外边距。 语法： Object.style.marginLeft=auto|length|% 可能的值： 值 描述 auto 浏览器设置的左外边距。 length 定义固定的左外边距。默认值是0。 % 定义基于父对象总高度的百分比左外边距。 实例 本例更改了段落的左外边距： <html> <head> <script type=”text/javascript”> function changeMargin() { document.getElementById(“p1″).style.marginLeft=”32px”; } </script> </head> <body> <input type=”button” onclick=”changeMargin()” value=”Change the left margin of … Continue reading
Posted in css
Leave a comment