IE6下文字line-height失效的解决方法

当一个容器里的文字与img、input、textarea、select、object等元素相连时,对这个容器设置的line-height数值就会失效,同时以上元素的行高可能×2,受影响的浏览器:ie5.01、ie5.5、ie6.0。

  解决方法是对与文字相连接的img、input、textarea、select、object等元素加以属性,代码如下:

.line-height{ 
 margin:(所属line-height-自身img,input,select,object高度)/2px 0; 
 vertical-align:middle; 
}

<style type="text/css教程">

.aa{ height:100px; width:300px; line-height:100px; background-color:#099;}

/* ?

这里 假设 ?input 高度等于 20?

margin: (所属line-height-自身高度)/2px 0;

就等于 margin:(100-20)/2px 0 = margin:40px 0;

大致效果是有了, 肯定还是有点小偏差,input高度是我假设20的。

*/

.aa input{ margin:40px 0; vertical-align:middle; }

</style>

<div class="aa">居中对齐 <input name="" type="text" /></div>

 

问题:在ie6中,当文字和img、input、textarea、select、object等对象在同一个容器中的时候,line-height属性失效。
只有全文字时,line-height属性才有效。

解决方法:
在其中一个非文字的对象的样式中增加:
margin: (容器的line-height - 对象本身的高度)/2px 0; 
vertical-align:middle;

解决问题。

 

时间: 2024-10-30 16:59:12

IE6下文字line-height失效的解决方法的相关文章

jQuery在ie6下无法设置select选中的解决方法详解_jquery

本文实例讲述了jQuery在ie6下无法设置select选中的解决方法.分享给大家供大家参考,具体如下: 这里主要解决在 ie6 下,jquery 无法设置 select 选中的问题.我们先看个例子: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> </head&g

window.location.href IE下跳转失效的解决方法

 这篇文章主要介绍了window.location.href IE下跳转失效的解决方法,需要的朋友可以参考下 代码如下: <a href="javascript:void(0)" >GoNext</a>  $("a").click(function(){  window.location.href = "xxx.html";  })    代码如上,在IE下,特别是在IE6中,点击超链接之后,浏览器并没有发生跳转行为. 

ie6下 jquery的click失效

问题描述 ie6下 jquery的click失效 下面代码,在其他浏览器下可以,ie6下没有反应,请大家帮帮忙,看看怎么回事? <div class="lijigoumai"> <ul> <li> <a class="shoppingCart" id="<%#Eval("productId") %>" href="javascript:void(0);"

margin-top失效的解决方法

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果.   这是网上的解决方法(并不适用我的情况)http://developer.51cto.com/art/201008/222728.htm 本文向大家描述一下margin-top失效的解决方法,margin-

jquery解决ie6中图片过大导致错位解决方法

jquery解决ie6中图片过大导致错位解决方法 在产品展示页面中用jqurey控制下: /*这个标签调用产品图片*/ <asp教程:image runat="server" id="productbigimg" /> 首先引入jquery <script src="/utility/js/jquery.js" type="text/网页特效"></script> <script ty

php多次include后导致全局变量global失效的解决方法

这篇文章主要介绍了php多次include后导致全局变量global失效的解决方法,实例分析了$GLOBALS失效的原理与解决方法,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了php多次include后导致全局变量global失效的解决方法.分享给大家供大家参考.具体分析如下: 在多个文件中,文件一个接一个include,但最后一个文件里的函数使用global后却无法引用全局变量.例如: a.php文件: ? 1 2 3 <?php $aa = 1; ?> b.php文件

Win7系统下CAD不能正常安装的解决方法

雨林木风Win7系统下CAD不能正常安装的解决方法: CAD指利用计算机及其图形设备帮助设计人员进行设计工作. 在设计中通常要用计算机对不同方案进行大量的计算.分析和比较,以决定最优方案;各种设计信息,不论是数字的.文字的或图形的,都能存放在计算机的内存或外存里,并能快速地检索;设计人员通常用草图开始设计,将草图变为工作图的繁重工作可以交给计算机完成;由计算机自动产生的设计结果,可以快速作出图形,使设计人员及时对设计作出判断和修改;利用计算机可以进行与图形的编辑.放大.缩小.平移和旋转等有关的图

thinkPHP使用post方式查询时分页失效的解决方法_php实例

本文实例讲述了thinkPHP使用post方式查询时分页失效的解决方法.分享给大家供大家参考,具体如下: 昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢各位大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题,也是因为刚入手thinkphp.在做项目的过程中,因为需要非常多的查询条件,如果以get方式提交表单的话,会因为url长度限制而报错,所以必须使用post方式提交表单数据,但是在分页的过程中,遇到了问题,因为thinkphp自带的分页是以a标签的形式,进

android开发 eclipse alt+”/”自动提示失效的解决方法_Android

1.用于没有一点提示的情况:依次打开eclipse上面的windows --preferences --java --editor -- content assist ,在右上方有一行"select the proposal kinds contained in the 'default' content assist list" 下面,勾选Java Prolosals 复选框,保存退出即可. 开发 eclipse alt+/自动提示失效的解决方法_Android-eclipse al

ie7中 iframe.style.height=&quot;100%&quot; 无效解决方法

ie7中 iframe.style.height="100%" 无效解决方法 100%高度的iframe在ie7中显示错误,原因是iframe.style.height="100%".       1.设置iframe父容器的高度值,100%就能生效(由此猜测默认情况下iframe的父容器高度是某个比较小的值,因此显示出来高度比较小)       2.如果是脚本动态创建的,iframe.style.height=document.body.scrollheight