今天给客户处理一个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就解决了,在此记录下。

标签: none

添加新评论