Chinaunix首页 | 论坛 | 博客
  • 博客访问: 616871
  • 博文数量: 210
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2062
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(210)

文章存档

2020年(2)

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: 其他平台

2016-11-21 15:32:06


点击(此处)折叠或打开

  1. 1 ie6.0横向margin加倍

  2. 产生因素:块属性、float、有横向margin。

  3. 解决方法:display:inline;
  4. 2 ie6.0下默认有行高

  5. 解决方法:overflow:hidden;或font-size:0;或line-height:xx px;
  6. 3 在各个浏览器下img有空隙(原因是:回车。)

  7. 解决方法:让图片浮动。
  8. 4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。

  9. 解决方法:a 在子标签最后清浮动{
  10.  
  11. }


  12.      b 父标签添加{overflow:hidden;}
  13.     c 给父标签设置高度
  14. 5 Ie6下,不识别最大宽、高度和最小宽高度,意即min-width/height和 Max-width/height在ie6中没效果,

  15. 解决方法:(1).abc{border:1px blue solid;width:200px;height:200px;}

  16.                           html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}

  17.         (2).abc{width:200px;height:200px;_width:200px;_height:200px;}(因为ie6有一个特征,当定义一个高度时,如果内容超过高度,元素会自动调整高度。)
  18. 6 Ie6里面:如li设宽、高,并且li里面的标签浮动,那么li之间会有间距

  19. 解决方法:li不设宽、高或者li内的标签不浮动
  20. 7 li之间有间距

  21. 解决方法:li 设置vertical-align:middle;
  22. 8 3像素问题:ie6下,当浮动元素与流动元素并列显示时,他们之间会存在三像素问题。

  23.    解决方法:用hack技术, 例如:所有浏览器通用 height:100px;

  24.                                                   ie6专用_height:100px;

  25.                                                   ie7专用*+height:100px;

  26.                                                   ie6/ie7共用*height:100px;
  27. 9 当定义行内元素为包含框时,且包含框包含的绝对定位元素以百分比为单位进行定位时,会出现混乱。

  28.     解决方法:在行内元素里加入{zoom:1;}
  29. 10 当多个浮动元素中间夹杂着HTML注释语句时,如果浮动元素宽度为100%,则在下一行多显示一个上一行最后一个字符。

  30.         解决办法:给浮动元素添加display:inline;
  31. 11 opacity 定义元素的不透明度

  32.   filter:alpha(opacity=80);/*ie支持该属性*/

  33.   opacity:0.8;/*支持css3的浏览器*/
  34. 12 两个块元素,竖向的margin值不增加,会重叠,其间距为最大margin值。
  35. 13 优先级:被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中,!important不起作用。
  36. 14 火狐不识别background-position-y 或background-position-x;

  37.  
  38. 15 ie6 不支持 fixed

  39.  

  40. /*对于非IE6可以这样写*/

  41. #top{

  42.     position:fixed;

  43.     bottom:0;

  44.     right:20px;

  45. }

  46. /*但是IE6是不支持fixed定位的,需要另外重写*/

  47. #top{

  48.     position:fixed;

  49.     _position:absolute;

  50.     top:0;

  51.     right:20px;

  52.     _bottom:auto;

  53.     _top:expression(eval(document.documentElement.scrollTop));

  54. }

  55. /*使用hack使IE6实现该效果,但这个东东会闪烁,需要以下代码*/

  56. *html{

  57.     background-image:url(about:blank);

  58.     background-attachment:fixed;

  59. }

  60. /*使固定在顶部*/

  61. #top{

  62.     _position:absolute;

  63.     _bottom:auto;

  64.     _top:expression(eval(document.documentElement.scrollTop));

  65. }

  66. /*固定在底部*/

  67. #top{

  68.     _position:absolute;

  69.     _bottom:auto;

  70.     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));

  71. } /*垂直居中*/

  72. #top{

  73.     position:fixed;

  74.     top:50%;

  75.     margin-top:-50px;

  76.     _position:absolute;

  77.     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));

  78. }


  79. 16 解决 ie6 最大、最小宽高 hack方法

  80. /* 最小宽度 */

  81. .min_width{

  82.     min-width:300px;

  83.     _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);

  84. }

  85. /* 最大宽度 */

  86. .max_width{

  87.    max-width:600px;

  88.    _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);

  89. }

  90. /* 最小高度 */

  91. .min_height{

  92.    min-height:200px;

  93.    _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);

  94. }

  95. /* 最大高度 */

  96. .max_height{

  97.    max-height:400px;

  98.    _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);

  99. }
  100. 17 z-index不起作用的 bug

  101. 1)ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个:1、父标签position属性为relative;2、问题标签含有浮动(float)属性。
  102. 2)所有浏览器:它只认第一个爸爸
  103. 层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬。用术语具体描述为:
  104. 父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。
  105. 18 ie各个版本hack

  106. /*类内部hack:*/

  107.     .header {_width:100px;} /* IE6专用*/

  108.     .header {*+width:100px;} /* IE7专用*/

  109.     .header {*width:100px;} /* IE6、IE7共用*/

  110.     .header {width:100px\0;} /* IE8、IE9共用*/

  111.     .header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/

  112.     .header {width:330px\9\0;} /* IE9专用*/

  113. /*选择器Hack:*/

  114.     *html .header{} /*IE6*/

  115.     *+html .header{} /*IE7*/


阅读(926) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~