星哥的博客

  • 首页
  • 系统
  • 虚拟机
  • 网站开发
  • 硬件外设
  • VPS/云主机
  • 心情随笔
  1. 首页
  2. 网站开发
  3. Code
  4. 正文

IE6-8下img标签对两端对齐代码的不兼容

2014年10月22日 2966点热度 0人点赞 0条评论

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

标签: 暂无
最后更新:2014年10月22日

wangxingcs

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

wangxingcs

这个人很懒,什么都没留下

我的博客

仅记录一些有用的教程,自己的经历,已屏蔽各大搜索引擎收录。

新浪微博 @wangxingcs

Twitter @wangxingcs(常在)

最新 热点 随机
最新 热点 随机
Proxmox VE(PVE)6.X 添加硬盘 PVE解决VM is locked问题 Proxmox VE配置更新源 黑群晖显示真实CPU信息(支持7.0.1) Proxmox VE直通硬盘(全盘映射方式) PVE去除“没有有效订阅”提示
Proxmox VE(PVE)6.X 添加硬盘
IE6-8下img标签对两端对齐代码的不兼容 黑群晖显示真实CPU信息(支持7.0.1) CentOS下升级Python 2.7.3 CentOS 6.X 最小化安装之后需要做的配置 Centos下测试硬盘读写速度 织梦DEDECMS模块/插件管理空白的解决办法
标签聚合
DSM MTP 群晖 虚拟机 CMS PVE FineCMS 驱动

COPYRIGHT © 2015-2023 wangxingcs.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

陕ICP备13007295号