今天给客户处理一个IE6-8下的网页BUG，表现为使用IE6-8打开网站，打开顶部后浏览器突然关闭，研究了半天发现，是IE6-8下img标签对text-align:justify;text-justify:inter-ideograph;代码的不兼容导致的；
原html代码如下：
<div class="list5"><a href="list-3.html"><img src="{dede:global.cfg_templets_skin/}/images/about.jpg" width="210" height="145" /></a>
{dede:sql sql='Select content from #@__arctype where id=3'}[field:content function="cn_substr(html2text('@me'),630)" /]...<a href="list-3.html">详细>></a>
{/dede:sql}</div>
原css代码如下：
.list5{ line-height:24px;{text-align:justify;text-justify:inter-ideograph;}
.list5 img{ display:block; margin:0 15px 10px 0; float:left;}
.ico1 li{ background:url(../images/dot06.jpg) left center no-repeat;}
分析此处代码有些不规范，对齐代码本身应作用于文字，这里赋值给了图片和文字，导致底端浏览器无法识别如何将图片两端对齐；
修改如下：
新html代码如下：
<div class="list5"><a href="list-3.html"><img src="{dede:global.cfg_templets_skin/}/images/about.jpg" width="210" height="145" /></a>
<span>{dede:sql sql='Select content from #@__arctype where id=3'}[field:content function="cn_substr(html2text('@me'),630)" /]...<a href="list-3.html">详细>></a>
{/dede:sql}</span></div>
原css代码如下：
.list5{ line-height:24px;}
.list5 img{ display:block; margin:0 15px 10px 0; float:left;}
.list5 span{text-align:justify;text-justify:inter-ideograph;}
.ico1 li{ background:url(../images/dot06.jpg) left center no-repeat;}
给文字端独赋值两端对齐，这样BUG就解决了，在此记录下。
文章评论