ie6 下文字和图片一起line-height失效的解决方法

最新推荐文章于 2021-06-09 23:29:10 发布
原创 最新推荐文章于 2021-06-09 23:29:10 发布 · 164 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Microsoft Internet Explorer浏览器中，容器内包含文字与各种元素（如img、input、textarea、select、object）时，设置的行高失效的问题，并提供了解决方法。

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等元素加以属性 

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

css line height无效,IE9中CSS line-height的文字垂直居中无效
weixin_36480977的博客
08-03 748
在ie9中有不少朋友会发现CSS中的line-height控制的文字垂直居中无效问题，下面小编来给各位朋友详细介绍此问题的具体解决方法。在IE9常常会遇到写的DIV CSS网页，文字有时不能垂直居中使用line-height根本无效，即使可以设置IE浏览器的兼容模式，但对于访客而言不可能每个人都会去设置兼容模式浏览，只能算是掩耳盗铃的解决办法，怎么办呢？只好搜索了，百度了一下才找到原因，原来IE9...
解决IE6下，给图片加上line-height属性不起作用的解决方法
01-21
当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 同时以上元素的行高可能×2： 受影响的浏览器： Microsoft Internet Explorer 5.01 / ...
IE6下line-height失效：当文字与图片img在同一行中显示时line-height失效的解决办法...
weixin_34411563的博客
12-05 199
问题描述： 在IE6兼容改造过程中，我遇到了一个比较诡异的问题。一个列表页的排序选项列表，当元素被选中（切换到该种排序下）后位置垂直居中就失效了。 应该显示为： 实际显示的效果为： HTML代码结构如下： 问题原因分析： 当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的l...
文字和图片一起排版,line-height 在IE6 下失效
日光海岸
10-12 149
  BUG症状：当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；  受影响的浏览器：  Microsoft Internet Explorer 5.01 / Windows  Microsoft Internet Explorer 5.5 / Windows  Microsoft Intern...
解决IE6下，给图片加上line-height属性不起作用的方法
weixin_30563319的博客
07-27 262
在css设置中，我们一般用行高line-height来设定某一行的高度，这在ie7与firefox等浏览器都适用。但当行中有其他元素时（如图片，SPAN,li..）在IE6.0下line-height会不起效果，后来查了下资料，果然如此，资料如下： 当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值...
设置line-height无效的解决办法
qq_37471721的博客
06-20 9149
今天在做项目的时候遇到一个很奇怪的问题，明明设置了line-height,可是文字并没有垂直居中，大概如下： 效果如下 显然line-height没有生效，后来发现font组合属性不能写到line-height后面，如果写到line-height后面的话要把属性分开写，font-weight:bold,font-size:16px,font-family:‘微软雅黑’,这样写也是可以的。更改...
line-height失效解决办法
热门推荐
小白博客
07-22 1万+
对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身img,input,select,object高度)/2px 0; vertical-align:middle-------垂直居中同时该属性指挥对inline-block元素起作用哟    ...
html超链接 ie9失效,ie9 line-height失效的原因及问题解决方法
weixin_39703773的博客
06-09 199
在处理浏览器兼容性问题时，你有没有发现在IE9中浏览DIV CSS网页文字字体偏上方，设置文字垂直上下居中line-height样式失效，而其它浏览器包括ie6-ie8均正常，究竟什么原因造成，如何解决与避免在ie9浏览器line-height失效。一、ie9 line-height失效原因CSS中使用了中文字体，而中文字体使用汉字。如：font-family:"微软雅黑"。使用CSS字体font...
font和line-height之CSS代码书写顺序不同，导致显示效果不一样
10-30
解决这个问题的方法是明确地分开`font`和`line-height`的声明，确保`line-height`总是在`font`之后，或者直接在`font`声明中包含`line-height`，以避免这种潜在的兼容性问题。 总之，理解`font`和`line-height`的...
IE6常见bug附解决方法
09-25
### IE6常见bug及其解决方法 #### 一、IE6怪异解析之padding与border算入宽高 **问题描述**： 在没有指定文档类型声明的情况下，IE6会使用其特有的“怪异模式”（Quirks Mode）来解析页面布局。在这种模式下，元素...
2022年单片机-第讲.ppt
09-10
2022年单片机-第讲.ppt
protobuf-lite-3.5.0-13.el8.tar.gz
09-10
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
2020年大学生网络公司实习报告范文.doc
09-10
2020年大学生网络公司实习报告范文.doc
计算机工作总结范文.doc
09-10
计算机工作总结范文.doc
Excel表格模板：年终原材料领料、退料明细汇总表.xlsx
最新发布
09-10
Excel表格模板：年终原材料领料、退料明细汇总表.xlsx
2020届-二轮-基因工程-专题卷-(江苏版).doc
09-10
2020届-二轮-基因工程-专题卷-(江苏版).doc
policycoreutils-dbus-2.9-16.el8.tar.gz
09-10
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
plymouth-theme-fade-in-0.9.4-10.20200615git1e36e30.el8.tar.gz
09-10
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
line-height在某些机型没有垂直居中
04-22
<think>好的，我现在要解决用户的问题：CSS的line-height在某些特定机型上无法实现垂直居中的情况。根据用户提供的引用内容，我需要整理出可能的原因和解决方案。首先，用户提到的引用[1]到[4]中有几个关键点： 1. 引用[1]中的例子显示，当使用line-height等于容器高度时，文本没有垂直居中。可能的原因包括字体设置、行内元素类型等。 2. 引用[2]指出line-height需要父级高度相同，并且元素必须是inline-block，同时使用text-align: center。 3. 引用[3]提到需要检查CSS的书写顺序，是否有覆盖，以及默认的margin和padding是否重置。 4. 引用[4]指出在IE9中，使用英文字体可能导致line-height失效，特别是中文字体的情况。 用户的问题集中在特定机型上，可能涉及不同浏览器或设备的兼容性问题。接下来需要结合这些引用和之前回答中的解决方案，综合给出针对line-height失效的具体解决方法。 首先，考虑常见的失效原因： - 字体问题：如引用[4]提到的，使用英文字体可能导致在中文环境下的问题，特别是旧版本浏览器。 - 元素类型：line-height对块级元素无效，必须是inline或inline-block。 - CSS覆盖：可能后续的代码覆盖了line-height或height的设置。 - 字体大小和行高顺序：如果font属性在line-height之后，可能会覆盖行高值。 - 默认样式：未重置margin和padding，导致计算高度不准确。 - 浏览器兼容性：某些旧机型或浏览器对line-height的支持不一致。 接下来，需要逐一验证这些可能性，并提供对应的解决方案。例如，检查元素是否是inline-block，检查字体设置，调整CSS书写顺序，添加浏览器前缀等。同时，结合之前回答中的方法，如使用Flexbox或绝对定位作为备用方案。 另外，用户提到的特定机型可能涉及到某些浏览器的特定问题，比如微信内置浏览器、旧版Android WebView或iOS Safari的不同表现。需要针对这些环境提供特定的调整方法，比如添加-webkit前缀，使用特定字体，或者调整布局方式。 最后，可能需要建议用户进行真机调试，使用工具如Chrome远程调试或微信开发者工具，来具体定位问题所在，并提供降级方案确保兼容性。</think>针对CSS `line-height` 在某些机型上垂直居中失效的问题，结合引用内容和实际开发经验，以下是系统性解决方案： --- ### 一、失效原因诊断 1. **字体兼容性陷阱** - 中文机型使用英文字体时可能破坏行高计算（如引用[4]所述） - 解决方案：添加中文字体兜底 ```css .box { font: 14px PingFangSC-Semibold, sans-serif, "Microsoft YaHei"; } ``` 2. **元素类型错误** - `line-height` 仅对 `inline/inline-block` 元素生效（如引用[2]） - 错误示例：对`div`直接使用`line-height` ```css .box { display: inline-block; /* 必须添加 */ width: 300px; height: 200px; line-height: 200px; } ``` 3. **CSS属性覆盖** - `font` 简写属性可能覆盖 `line-height`（如引用[3]） ```css /* 错误写法 */ .box { line-height: 200px; font: 14px PingFangSC-Semibold; /* 此行会重置line-height */ } /* 正确写法 */ .box { font: 14px/200px PingFangSC-Semibold; /* 显式设置行高 */ } ``` --- ### 二、机型适配解决方案 #### ▸ 通用修复方案 ```css .box { display: inline-block; /* 关键属性 */ vertical-align: middle; /* 修复基线偏移 */ line-height: 200px; height: 200px; font-family: "PingFang SC", system-ui; /* 中文字体优先 */ font-size: 14px; padding: 0 10px; /* 防止文本溢出 */ box-sizing: border-box; /* 确保高度计算正确 */ } ``` #### ▸ 特殊机型处理 1. **华为/小米机型** ```css .box { position: relative; top: -0.1em; /* 微调偏移 */ } ``` 2. **iOS Safari** ```css @supports (-webkit-touch-callout: none) { .box { line-height: 1.2; /* 改用倍数单位 */ display: flex; align-items: center; } } ``` 3. **IE9+浏览器** ```css .box { writing-mode: vertical-lr; /* 触发不同渲染模式 */ text-align: center; } ``` --- ### 三、替代方案推荐 当`line-height`无法修复时，优先使用以下方法： #### 方案1：Flexbox终极方案 ```css .parent { display: flex; justify-content: center; align-items: center; height: 100vh; } ``` #### 方案2：伪元素撑开高度 ```css .box::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .box > span { display: inline-block; vertical-align: middle; } ``` #### 方案3：绝对定位+变形 ```css .box { position: absolute; top: 50%; transform: translateY(-50%); } ``` --- ### 四、调试验证流程 1. **字体检查** - 使用`getComputedStyle`确认最终字体 ```javascript console.log(getComputedStyle(document.querySelector('.box')).fontFamily); ``` 2. **行高验证** - 通过浏览器开发者工具检查`line-height`计算值 ![Chrome DevTools行高检测示意图] 3. **机型模拟测试** - 使用Xcode Simulator测试iOS表现 - 通过Android Studio模拟华为EMUI系统 --- ### 五、高频问题答疑 **Q：为什么设置相同数值仍不居中？** - 可能受`font-family`的基线影响，添加`vertical-align: middle`[^2] - 检查是否存在`text-rendering: optimizeLegibility`属性 **Q：微信浏览器内异常怎么办？** - 添加X5内核专属样式： ```css _::-webkit-full-page-media, _:future, .box { line-height: 199px; /* 微调1px */ } ``` [^1]: 行高与字体组合需考虑排版基线差异 [^2]: `vertical-align`对行内元素布局有重要影响 [^3]: 移动端字体渲染差异可能导致行高计算误差 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值