博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
IE6下line-height失效:当文字与图片img在同一行中显示时line-height失效的解决办法...
阅读量:5880 次
发布时间:2019-06-19

本文共 667 字,大约阅读时间需要 2 分钟。

问题描述:

在IE6兼容改造过程中,我遇到了一个比较诡异的问题。一个列表页的排序选项列表,当元素被选中(切换到该种排序下)后位置垂直居中就失效了。

应该显示为:

实际显示的效果为:

HTML代码结构如下:

 

问题原因分析:

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 同时以上元素的行高可能×2
受影响的浏览器: 
  Microsoft Internet Explorer 5.01
  Windows  Microsoft Internet Explorer 5.5
  Windows  Microsoft Internet Explorer 6
 

解决办法:

     通过调整图片img元素的样式来实现垂直居中的效果。
经过调整在原先的IE9、chrome和safari下可以正常显示,同时在IE6环境下也可以正常显示
 
.selector img{
margin:15px 0;/*所属line-height-自身img,input,select,object高度)/2px*/ vertical-align:middle;}

 最后注明一下版权,本文由yutiansanshou原创发表,你可以任意转载,但必需在明显位置注明作者和出处,而且不能用于任何商业用途

     

转载于:https://www.cnblogs.com/yutiansanshou/archive/2012/12/05/2802600.html

你可能感兴趣的文章
关于浏览器的cookie
查看>>
Hyper-V 2016 系列教程30 机房温度远程监控方案
查看>>
.Net 通过MySQLDriverCS操作MySQL
查看>>
JS Cookie
查看>>
ubuntu Unable to locate package sysv-rc-conf
查看>>
笔记:认识.NET平台
查看>>
cocos2d中CCAnimation的使用(cocos2d 1.0以上版本)
查看>>
【吉光片羽】短信验证
查看>>
MacBook如何用Parallels Desktop安装windows7/8
查看>>
gitlab 完整部署实例
查看>>
GNS关于IPS&ASA&PIX&Junos的配置
查看>>
影响企业信息化成败的几点因素
查看>>
SCCM 2016 配置管理系列(Part8)
查看>>
struts中的xwork源码下载地址
查看>>
ABP理论学习之仓储
查看>>
我的友情链接
查看>>
Tengine新增nginx upstream模块的使用
查看>>
CentOS图形界面和命令行切换
查看>>
HTML5通信机制与html5地理信息定位(gps)
查看>>
汽车常识全面介绍 - 悬挂系统
查看>>