IE6/IE7下:inline-block解决方案

IE6/IE7下对display:inline-block的支持性不好。
1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;
2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性)
ie中对内联元素使用display:inline-block,是不识别的,但使用display:inline-block在ie下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么ie下,对块元素设置display:inline-block属性无法实现inline-block的效果。
这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

IE6下块元素如何实现display:inline-block的效果?

有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。需要注意的是这两个display必须在两个CSS声明中才有效,代码如下(…为省略的其他属性内容):

div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:

div { display:inline-block; _zoom:1;_display:inline;} /*推荐:ie6*/
div { display:inline-block; *zoom:1;*display:inline;} /*推荐:ie6、7*/

知识点:
1、display:inline-block,让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。IE6不支持这个属性,但IE8开始支持这个属性。
2、IE私有属性Zoom的使用介绍,触发IE浏览器的haslayout。Firefox等浏览器不支撑。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

参考:
http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html
http://www.wufangbo.com/ie6-ie7-display-inline-block/

ie6 bug之滤镜导致输入框不可点击问题

收到反馈ie6下,密码输入框不可点击,与在开始紧张的排查过程。

由于脚本部分是和程序员分工实现的,初步认为问题同在这个地方,尝试换了相应的placeholder脚本,发现仍然时不时存在这个问题,应该不是脚本的问题。

后来去掉样式表后,默认输入框样式点击是正常的,终于找到罪魁祸首了。

	background: url(../img/login_title.png) no-repeat 0 0;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/login_title.png');
	_background-image:none;	

以上代码是为了处理ie6 png透明问题的,去掉后点击输入框就正常了。记录一下,看来使用png透明滤镜时,要注意了。

IE6中a:hover的bug

先看html部分:

  • 密码提示问题
  • 密码管理
  • 再看css部分:

    a span.item_icon_11{background-position: -1000px 0;}
    a span.item_icon_12{background-position: -1100px 0;}
    a:hover span.item_icon_11{background-position: -1000px -82px;}
    a:hover span.item_icon_12{background-position: -1100px -82px;}
    

    想实现,当鼠标移到链接上时,改变span的背景。其他浏览器下常,但在ie6下,出现了问题。移动到链接上时,背景改变了,但是过一会才消失、很迟缓。
    找了一下原因如下:
    原因是IE6不允许a:hover的属性与a:link的属性相同如果a:hover 中没有样式的改变,hover就不会被触发,所以需要加一个属性来区别,不论a:hover里写入任何属性,都可以使之恢复正常,最常见的是a:hover{zoom:1;}

    修改后的css部分:

    .aq_section ul li a:hover{
    	zoom:1;
    }
    

    参考:http://blog.163.com/cs198678@126/blog/static/134713129201047112634855/

    ie6/7 Bug之input宽度问题

    问题:如下代码,实现了自适应按钮。但是第二个按钮,由于某种情况需要,里面包含一个input标签。在IE6、IE7下,当input的padding值为0时,随着按钮里value文字的增多,左右内边距也逐渐增大;当input设padding:0 10px;时,IE6,IE7左右内边距表现得比其它浏览器大,远远大于10px。

    html代码如下:

    
    

    css代码如下:

    .btn-list li a,.btn-list li a span{
    	background:url(/img/sprite.gif) no-repeat;
    }
    .btn-list li a,.btn-list li a span{
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        font-family:'微软雅黑', '黑体', '宋体';
        color:#fff;
        cursor: pointer;
    }
    .btn-list li a  {
        padding-left: 15px;
        text-decoration: none;
    }
    .btn-list li a span {
        padding-right:15px;
        width: auto;
        height: 37px;
        line-height: 37px;	
        background-position: right 0;
    }
    .btn-list li a span input {
        padding:0 0;
        height:37px;
        line-height:37px;
        border: 0 none;
        background:none;
        outline:none;
        color:#ffffff;
        cursor:pointer;
        overflow:visible;
    }

    解决方法:input的样式加上overflow:visible;即可解决此问题,原因不明。

    参考:http://blog.csdn.net/jyy_12/article/details/6636099

    CSS Position Fixed for IE6

    ie6下不支持固定定位(position:fixed)。但是有些时候需要用到,例如:回到顶部、意见反馈、对联广告等。下面记录一种解决方法,并说明一下用法。可将css部分,存为一个文件,文件名为ie6_fixed.css,在需要用到的页面head区去引用它。

     
    

    引用后,根据固定的位置,设置相应的样式。如下为固定在右下角示例,若需要留白,可以使用margin属性。

    html部分:

    回到顶部
    

    css部分,建议另存为ie6_fixed.css按需调用:

    /*Make position:fixed work in IE6!*/
    /* position fixed Top */
    .fixed-top {position:fixed;bottom:auto;top:0;}
    /* position fixed Bottom */
    .fixed-bottom {position:fixed;bottom:0;top:auto;}
    /* position fixed Left */
    .fixed-left {position:fixed;right:auto;left:0;}
    /* position fixed right */
    .fixed-right {position:fixed;right:0;left:auto;}
    
    /* IE6 Fixed Position Jitter Fix */
    * html,* html body {background-image:url(about:blank);background-attachment:fixed;}
    /* IE6 position fixed Top */
    * html .fixed-top {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
    /* IE6 position fixed right */
    * html .fixed-right {
    	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));}
    /* IE6 position fixed Bottom */
    * html .fixed-bottom {
    	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)));}
    /* IE6 position fixed Left */
    * html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
    

    参考:http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

    text-indent在IE6/7下内容消失的问题

    问题现象:

    测试反馈ie6/7翻页不见了,但是ie8及firefox下是正常显示的,经过查看源代码发现数据是存在就是页面上没有显示出来,认定为页面问题。

    解决过程:

    经过删减css逐步排除,将错误定格在text-indent:-999px上面。这一块代码是文字隐藏的方法之一,用另一种文字隐藏方法替换之,页面就正常了。

    分析:

    当inline-block与text-indent在IE6、7下相遇后,text-indent为负时,元素向左偏移,text-indent为正时,元素向右偏移。在这种情况下,元素的偏移量由text-indent和margin值决定,如:margin-left::-10px; text-indent:10px相当于margin-left:0; text-indent:0元素没有偏移,那么解决之道是?

    简单的解决方案是不要在IE6、7下使用inline-block,比如这样设置display:inline-block !important; display:block;,IE6、7不认识!important。这样IE6、7下会渲染成一个块级元素,而其他浏览器则显示为inline-block元素。

    还有一种解决方法:IE6/7 inline-block实现及分析

    这次问题是出在inline-block和text-indent相遇了,那么这样的问题是否会出现在其他元素上呢?考察元素的默认样式,可知:input、select、button、textarea的默认display皆为inline-block。那么简单地考察下button的表现,也同样存在问题。

    参考:http://uxcode.info/2010/06/06/inline-block-text-indent-ie/

    hasLayout——IE中css bug的罪魁祸首

    什么是hasLayout?

    要想更好的理解css,尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误,就是源于 haslayout。
    haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)。
    通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。

    什么情况下hasLayout不会出现?

    一般情况都不会出现,当然除了下面罗列的默认具有hasLayout的元素和使用特定样式触发以外;
    它会带来各种诡异表现,当你发现IE7-出现了一些不可思议的问题,首先要检查的就是是否是hasLayout在捣鬼;
    hasLayout只出现在IE7及更早版本中,IE8不存在hasLayout解析模式,我们只讨论指定doctype的情况。

    hasLayout的触发条件:

    * position: absolute(IE5+)
    * float: left|right(IE5+)
    * display: inline-block(IE5+)
    * width: “auto”以外的任何值(IE5+; 对inline元素无效)
    * height: “auto”以外的任何值(IE5+; 对inline元素无效)
    * zoom: “normal”以外的任何值(IE5.5+; IE私有属性)
    * writing-mode: tb-rl(IE5+; IE私有属性)
    * overflow: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不能应用在未触发hasLayout的元素上)
    * overflow-x|-y: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不触发hasLayout; 此属性在CSS3中才获支持)
    * min-width: 任何值(IE7; 即使是0)
    * max-width: “none”以外的任何值(IE7)
    * min-height: 任何值(IE7)
    * max-height: “none”以外的任何值 (IE7)
    * position: fixed(IE7)

    清除或重置hasLayout:

    * position: static(IE5+)
    * float: none(IE5+)
    * display: “inline-block”以外的任何值(IE5+)
    * width|height: “auto”(IE5+; 对inline元素无效)
    * zoom: “normal”(IE5.5+; IE私有属性)
    * writing-mode: 从’tb-rl’到’lr-tb'(IE5+; IE私有属性)
    * max-width|max-height: “none”(IE7)
    * overflow: visible(IE7)

    haslayout 问题的调试与解决

    当网页在ff中表现正常,而在 IE7 或更早版本中有异常表现时,可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定zoom:1。使用 zoom:1 是因为大多数情况下,它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失,那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性,其次再考虑其他属性。
    对于IE7 ,最好的办法是设置最小高度属性为0;这个技术是无害的,因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。
    对 IE6 及更早版本来说,常用的方法被称为霍莉破解(Holly hack),即设定这个元素的高度为 1%(height:1%;)。需要注意的是,当这个元素的 overflow 属性被设置为 visible 时,这个方法就失效了。或者使用 IE的条件注释。

    IE6.0下DIV不能实现1px高度的几种解决方法

    IE6有个bug,高度为1px的DIV在IE6里不管用。这是因为IE6中的DIV默认有个最小字体高度,div的最小高度就是这个高度,即使设置了height:1px,div显示出来的高度也不是1像素。

    解决方法有如下几种:

    1、overflow:hidden实现最小高度。

      .line1{
    	width:100%;
    	height:1px;
    	background:#c00;
    	overflow:hidden;
      }

    2、line-height实现最小高度

      .line2{
    	width:100%;
    	height:1px;
    	background:#c00;
    	line-height:1px;
      }

    3、用border-top:1px solid #ff0000 边框的方法制作一个细线。