HTML5----前段各种常见BUG

 1、在IE6下，DIV中的字会多出，并且自成一行，而且是原来的字。

    这是注释bug，经典的ie6 bug。
    说明：注释造成文字溢出是IE6的BUG，注释造成文字溢出与其位置有关，注释造成文字溢出与文字区块的固定宽度有关，
    溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。
     当溢出的文字字数大于文本的字数时，文字区块将会消失。
解决方法：
    1、不放置注释。最简单、最快捷的解决方法。
    2、注释不要放置于2个浮动的区块之间。
    3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>文字</div></div>。
    4、去除文字区块的固定宽度，与3有相似之处。 

IE6行高加倍显示bug  ：
 正常效果如图：

 

 图中的文字我设置的line-height调整垂直高度，但在IE6下会出现双倍行高bug.

 

 

行高将块元素撑开了。

解决办法：

将行高换成padding-top可解决问题。

 
 

IE6/IE7行内标签右浮动自动换行bug
 这是正常显示的效果：

 

我用<strong></strong>标签包裹右侧日期文字并为其设置右浮动，高大上的浏览器都显示正常咱们看看IE6中的显示效果。

 

 恩，变成这样了。原因是因为在IE6下右浮动会自动换行，解决办法如下：
1.strong和前面的标签交换位置.（这种适合右浮动标签前面只有一个标签）
    缺点:语义结构发生改变,不合逻辑.
2.前面的标签加左浮动,strong加右浮动 （这种方法也适合之后两种标签的情况下）
3.使用IE hack 在strong标签中加入只有IE6,7可以识别的样式
    *margin-top:-20px;
    _margin-top:-20px;
对于这个图我用的是第3种方法，效果不错。

 

border:0与border:none区别
 border:0占内存

border:none不占内存

在IE6中button和input中border：none无效。

 

inline-block元素的4px空白间距bug  
 先上图：

 

这张是在IE7下显示的正确效果，注意下面的文字。我为小红点设置了display：inline-block属性，右侧文字为行内元素a标签。在低版本浏览器中他是显示正常的，但是在IE8-9、Firefox、Safari、Chrome等浏览器中他是这样的。（Chrome浏览器间距为8px）

 

小红点与文字之间出现了间距。解决方法如下：
1.负的margin
 为a标签设置负值，这是我想到的第一个方法但是我不推荐使用，原因很简单兼容性太差。

2.改变HTML结构
我之前的代码是这样写的。

<ul>
<li>
<span></span>
<a href="">新用户注册</a>
</li>
<li>
<span></span>
<a href="">忘记密码了</a>
</li>
</ul>

这种标准的书写格式会出现bug，咱们换个“姿势”就OK了比如像这样。

<ul>

<li>

<span></span><a>新用户注册</a>

</li>

<li>

<span></span><a>忘记密码了</a>

</li>

</ul>

我个人推荐这种方法，简单实用。截图为证：

小手效果：cursor:pointer
cursore:hand  (IE6) 
opacity:0.6
filter:alpna(opacity:60) (IE6)
别的还可以用Hank*来写 

 

IE6/IE7display:inline-block属性失效  

2014-04-11 22:46:16|  分类： 兼容问题 |  标签：ie7display属性失效  |举报|字号 订阅

 

 

恩，先来张图。

这张是IE9中的显示效果，左侧的每日活动设置的是display:inline-block。注意2008.7的位置现在为正常。咱们再来看看IE7中的效果。

 

在IE7中display:inline-block失效，因此2008.7位置错位了。
解决的办法如下：
display: inline-block;
*display: inline;
zoom:1;
加上下面两条代码就OK了。