【转载】解决IE6下的行高line-height失效问题

最新推荐文章于 2019-11-18 19:21:23 发布
最新推荐文章于 2019-11-18 19:21:23 发布
阅读量444 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cy_619/article/details/72518428
本文介绍了一种在Microsoft Internet Explorer 5.01/5.5/6中解决特定元素与文字连接时行高失效的问题的方法。通过对img、input、textarea、select、object等元素应用特定的CSS属性来确保文本和这些元素在同一行上正确对齐。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

BUG症状：
当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；

受影响的浏览器：
Microsoft Internet Explorer 5.01 / Windows
Microsoft Internet Explorer 5.5 / Windows
Microsoft Internet Explorer 6 

解决方法：
对和文字相连接的img、input、textarea、select、object等元素加以一下CSS属性：
margin: (所属line-height-自身高度)/2px 0; 
vertical-align:middle;

uniapp小程序开发文字行高，text 设置 line-height 行高无效的解决办法
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-07 404
在小程序开发过程中，遇到标签无法直接设置的问题时，可以通过将其包裹在一个标签中，来解决这个问题。这是一个简单有效的解决方案，希望能帮助大家避免不必要的麻烦。如果你也遇到了类似的问题，不妨试试这个方法！
关于css中line-height(行高)设置无效的问题的解决方法
09-22
主要介绍了关于css中line-height(行高)设置无效的问题的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
line-height失效或者被过滤器过滤的问题
你若成风，我则化雨
04-11 881
line-height 是设置行间距离（行高） 的一种方法该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计...
css中line-heigth失效
weixin_30436891的博客
03-01 307
css中，写了这样的两行： line-height: 200px; font: 20px Arial; 结果line-height失效了。 原因是font中包含了line-height的赋值(默认值normal)，导致前面的200px被层叠覆盖了。 font连写时，line-height写在font-size的后面==> font-size/line-height 转载于:htt...
CSS line-height 失效2
zbailing的博客
07-11 432
案例1 <div class="head"> 你好，西南石油大学。 </div> .head{ text-align: center; background: #333;/* 设置整个背景为黑色，便于观察字体 */ color: red; line-height: 100px;/* 设置行高，让字体居中 */ ...
为什么line-height不起作用
z007pig的博客
11-18 5495
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
解决IE6下，给图片加上line-height属性不起作用的解决方法
01-21
在css设置中，我们一般用行高line-height来设定某一行的高度，这在ie7与firefox等浏览器都适用。但当行中有其他元素时（如图片，SPAN,li..）在IE6.0下line-height会不起效果，后来查了下资料，果然如此，资料如下： ...
ie6下line-height属性失效与解决办法
想飞的鱼
08-18 197
问题：在ie6中，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性失效。只有全文字时，line-height属性才有效。 解决方法： 在其中一个非文字的对象的样式中增加： margin: (容器的line-height - 对象本身的高度)/2px 0;  vertical-align:middle; 解决问题。...
设置line-height无效的解决办法
qq_37471721的博客
06-20 9143
今天在做项目的时候遇到一个很奇怪的问题，明明设置了line-height,可是文字并没有垂直居中，大概如下： 效果如下 显然line-height没有生效，后来发现font组合属性不能写到line-height后面，如果写到line-height后面的话要把属性分开写，font-weight:bold,font-size:16px,font-family:‘微软雅黑’,这样写也是可以的。更改...
IE6不支持line-height
shikun520的专栏
10-18 147
IE6不支持line-height？其实是支持ie6,一个容器里如&lt;li&gt;放有文字和&lt;img&gt; ,&lt;input&gt;时，line-height行高在ie6 下会失效! 但ie6就文字是支持的 这样一般是用padding来解决...
ie6下的line-height属性
05-08 122
line-height这个属性是被ie6所支持的。 当是当一个父级元素内的子元素，包含了文字，且文字和img,input,label,span这些内联元素连接在一起的时候，你对父级元素设置line-height是没有任何效果的。 很多情况下，我们希望文字和表单元素（比如input输入框）垂直居中，在设置line-height没有效果的时候，我们应该怎么办？ 当你进退两难的时候，你是...
【浏览器兼容】在IE6下行高属性（line-height）失效的解决办法！
clinz的专栏
11-10 863
<br />问题：<br />      在ie6中，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性失效。只有全文字时，line-height属性才有效。 <br /> <br />解决方法：<br />      在其中一个非文字的对象的样式中增加： <br />                                        margin: (容器的line-height - 对象本身的高度)/2px 0;
ie中的字体行高bug —— line-height bug
laravel framework
02-25 267
ie中的字体行高bug —— line-height bug 在 firefox 中 ，无论你要 定义一个div的 高度是多少，firefox都能准确显示，而在ie中，我们会遇到这样的问题 ：如果我们没有定义一个div的 line－height 和 font－size，那么一般情况下你定义一个高5px的div，通常你会看到一个高为12px的 div。 　　这是因为ie默认的字体大概是1...
IE6下line-height 失效的解决办法
GOBY 栏目
08-24 167
IE6下使用line-height时候， 全文字会垂直居中对齐的， 如果当文字遇到图片， 文本框， 下拉框等其他元素时候在ie6下就会失效， 很多人一般用padding的方法来解决的。 这里说下另种方法。 先看下效果：点击阅览IE6下line-height 失效的解决办法 点击预览页面，可以查看源文件。里面也有详细说明。 以下是解决 IE6下line-height 失效的解决办法 主要代码...
IE6行高(line-height)失效
weixin_30883311的博客
05-08 141
<a class="bug" href=""><span></span>i am bug</a> .bug{height:60px;line-height:60px;background-color:#999;} .bug span{display:inline-block;width:100px;height:2...
【转】IE6下Line-height失效问题
qiandundiandi的专栏
08-27 364
总是会遇到图片与文字并排，在IE6及更低版本浏览器下行高失效的问题。 首先，我们来看一下原因： IE下line-height属性失效是由于文字中包含img、input、select、textarea、button、object等标记造成的。或者也可以说是在line-height的元素里的文字，同时有了block或者是inline-block元素导致的。 解决办法： 对和文字
【IE】IE对line-height 失效的的解决方案
weixin_33836874的博客
05-12 1348
微软的IE9 + Extjs3.1 确实头疼。在使用了line-height:20px 的Tree的样式，可是一直没有生效， 以下给出3中解决方式： 方案1、加padding-top： &lt;div style="height:22px;line-height:22px; padding-top:3px;background:red;color:#FFFFFF;font-siz...
IE6行高line-height失效问题方法详解
妈妈说：吃得苦中苦，方为人上人。
08-03 1868
以前做面面IE6行高问题,总出.但为了省时间,都改用PADDING撑起来去解决了....就直接不用行高解决.今天有空又在网上查了查.总结一下解决方法!因为li中加入图片，会导致line-height失效如:当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 同时以上元素的行高可能×2：受影
元素height100%时如何让line-height也100%
最新发布
05-14
<think>好的，我现在需要解决用户的问题：如何在元素高度为100%时，设置行高(line-height)也达到100%的实现方法。首先，用户提到了CSS中的height和line-height属性，特别是当height设为100%时，如何让line-height也生效。 首先，我得回忆一下line-height和height的关系。根据引用[1]的内容，当没有设置height时，div的高度由line-height决定，并且文字垂直居中。而当height和line-height相等时，文字也会垂直居中。但用户的问题是当height为100%的情况下，怎么让line-height也设置为100%。这里可能需要明确百分比的具体计算方式。 根据CSS规范，百分比值对于line-height是相对于元素自身的字体大小（font-size）来计算的，而height的百分比则是相对于父元素的高度。所以如果用户直接将line-height设为100%，这实际上是基于当前元素的字体大小，而不是父元素的高度。例如，如果元素的font-size是16px，那么line-height:100%就是16px，而height:100%则取决于父元素的高度，假设父元素高度是200px，那么height就是200px，这时候line-height的100%显然和height的100%不同。 因此，用户的需求可能是在height为父元素100%的情况下，让line-height等于这个height的值，使得文字垂直居中。这时候直接设置line-height:100%可能无法实现，因为两者的计算基准不同。那么解决办法可能需要让line-height的值等于height的值，即同样基于父元素的高度。 但是，line-height不支持相对于父元素高度的百分比，所以这里可能需要其他方法。例如，使用视窗单位（如vh），或者使用Flexbox布局。不过用户可能希望保持百分比的使用，尤其是在嵌套结构中。 另一种方法是将line-height设置为与height相同的值。例如，如果父元素高度已知，比如是200px，那么子元素设置height:100%即200px，同时设置line-height:200px。但用户的情况可能父元素高度是动态的，或者未知，这时候需要使用相对单位。 或者，使用绝对定位结合transform。例如，将文字居中，但这样可能超出用户的预期，因为用户可能希望用line-height来实现。 另外，引用[2]中提到当高度为百分比时，使用line-height=height的方法可能失效，因为两者的计算方式不同。这时候可能需要方法一，但用户提供的引用中没有具体说明方法一是什么，可能需要进一步分析。 可能的解决方案是使用Flexbox布局，将父容器设为display:flex，然后子元素使用align-items:center来实现垂直居中，这样就不需要依赖line-height。或者使用Grid布局。但这可能改变布局方式，用户可能希望保持原有结构。 如果必须使用line-height，并且父元素的高度是百分比，那么可能需要通过JavaScript动态计算父元素的高度，然后设置line-height为同样的值。但这样会增加复杂性，可能不是纯CSS的解决方案。 再仔细看用户提供的引用，引用[2]提到当高度为百分比时，让文字垂直居中的方法一，可能指的是设置line-height等于height的值，但需要确保两者都是基于同一个父元素的高度。例如，如果父元素的高度是100px，子元素height:100%即100px，同时line-height:100px。但如果父元素的高度是动态变化的，这种方法可能不可行，除非使用CSS变量或者预处理器来同步这两个值。 或者，如果父元素的高度由内容撑开，而子元素height:100%会继承父元素的高度，这时候设置line-height为100%可能无法达到预期，因为line-height的百分比基于字体大小，而不是父元素高度。因此，可能需要明确设置line-height的具体值，而不是百分比。 总结可能的解决步骤： 1. 确定父元素的高度是否为固定值或动态变化。 2. 如果父元素高度固定，子元素设置height:100%和line-height等于父元素高度。 3. 如果父元素高度动态，考虑使用Flexbox或Grid布局实现垂直居中。 4. 或者使用绝对定位和transform: translateY(-50%)来居中文字。 5. 如果必须使用百分比，可能需要使用视窗单位，如height:100vh，line-height:100vh，但这种情况可能不适用于所有情况。 根据用户的问题，他们可能希望保持百分比的使用，并且父元素的高度是相对于其父元素的。因此，可能的最佳实践是使用Flexbox，因为它更现代且可靠。但需要检查用户是否接受改变布局方式。 或者，结合CSS变量，在父元素中定义高度变量，然后子元素继承该变量用于line-height。例如： .parent { height: 200px; --child-height: 100%; } .child { height: var(--child-height); line-height: calc(var(--child-height) * 1); } 但这种方法需要浏览器支持CSS变量，并且需要父元素显式定义变量。 另一种方法是利用em单位，如果父元素的高度是基于字体大小，那么设置line-height为相同的em值。例如，如果父元素高度是2em，子元素height:100%即2em，同时line-height:2em。但这种情况需要父元素的高度基于字体大小，可能不适用于所有场景。 综上所述，可能的解决方案是： - 使用Flexbox或Grid布局实现垂直居中，不依赖line-height。 - 如果必须使用line-height，且父元素高度已知，直接设置line-height为父元素高度值。 - 使用JavaScript动态调整line-height的值，与height保持一致。 根据用户提供的引用，引用[3]提到line-height和vertical-align的关系，可能需要注意vertical-align的影响，特别是当行内元素存在时。 因此，最终的解决方案可能包括： 方法一：使用Flexbox布局 .parent { display: flex; height: 100%; } .child { align-items: center; justify-content: center; } 方法二：使用绝对定位 .child { position: relative; top: 50%; transform: translateY(-50%); } 方法三：设置line-height为与height相同的具体值，但需要确保父元素高度已知。 或者，如果父元素的高度是100%，而子元素也是height:100%，可能需要将line-height设置为100%的父元素高度，但如前所述，这需要父元素的高度是确定的，或者使用视窗单位。 例如，如果父元素的高度是视窗高度的100%，则子元素可以设置： .child { height: 100vh; line-height: 100vh; } 但这可能不适用于嵌套结构。 最后，根据用户的问题，最佳回答可能需要结合Flexbox方法，因为这是目前最可靠的方式，同时解释为什么直接设置line-height:100%可能无法工作，因为百分比的计算基准不同。</think>[系统级响应] 要在元素高度为100%时实现行高(line-height)100%的垂直居中效果，需注意两者的百分比计算基准不同：`height: 100%`基于父容器高度，而`line-height: 100%`基于当前元素的字体大小。以下是具体实现方法： ### 方法一：使用Flexbox布局（推荐） ```css .parent { display: flex; height: 100%; /* 父容器需有明确高度 */ align-items: center; /* 垂直居中 */ } .child { width: 100%; } ``` 此方法通过Flex容器自动实现垂直居中，无需依赖`line-height`[^3]。 ### 方法二：动态计算line-height（需固定高度） 若父容器高度已知（如300px）： ```css .child { height: 100%; /* 继承父容器300px */ line-height: 300px; /* 手动匹配高度 */ } ``` 但此方法缺乏灵活性，仅适用于固定高度场景[^1]。 ### 方法三：使用视窗单位（适用于全屏场景） ```css .child { height: 100vh; /* 视窗高度的100% */ line-height: 100vh; /* 匹配视窗高度 */ } ``` 适合全屏布局，但嵌套结构需逐层继承视窗高度[^2]。 ### 注意事项 - **百分比差异**：`line-height: 100%`实际等于当前字体大小，而非父容器高度[^3]； - **动态场景**：若父容器高度动态变化，建议使用Flex/Grid布局或JavaScript动态同步高度与行高。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值