各浏览器私有前缀-兼容行高line-height

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

本文介绍了一种在不同版本Internet Explorer及Chrome、Firefox等浏览器中保持一致行高的CSS兼容性写法。
line-height: 35px\9; /*IE8*/
   *line-height: 35px; /* IE7支持 */ 
   _line-height: 35px; /* IE6支持 */ 
   -ms-line-height: 35px;/*IE9+支持*/
   -webkit-line-height: 1; /*chrome safair*/
   -moz-line-height: 35px;/*火狐*/
pc端不同浏览器兼容性问题及解决方案 _@jie
tattoo_jie的博客
09-22 1757
代码兼容：IE7及以上，360浏览器，搜狗浏览器，谷歌，火狐，欧朋等等。 一．需要注意的地方： 1.写好标准头： 2.首先引入初始化css,保证消除不同浏览器的细微差别。 具体内容： *{margin:0;padding:0;} body{font-size:12px;line-height:25px;font-family:Arial,Helvetica,“Microsoft YaHei”,“SimSun”,sans-serif;color:#606060;background:#f6f6f6;paddi
css的文字line-height兼容问题
你帅还不是一样敲代码的博客
06-10 2162
因为游览器的不同，默认的line-height也会不一样，所以有的页面如果没有设置行高的话， 依赖的元素进行定位的时候会发生不一样的变化，所以为了解决兼容问题，要依赖文字定位的， 最好都给文字写上行高！ 如下图：
line-height和字体实际高度的计算
weixin_30700977的博客
06-15 610
最近讨论到了line-height的问题，做了一个实验，分别测试占主流的Firefox、IE6、IE7、IE8下的line-height的算法。 1.第一种情况，字体为宋体，在不设置line-height时，font-size:12px。 Firefox—-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。 IE6—–字体实际高度为11px，上留白0，下留白3px，上...
深入解析 CSS `line-height` 属性
2501_93104808的博客
10-01 1005
CSS line-height 属性用于控制文本行高，影响行间距和可读性。它定义了行盒高度，通过半行距实现文本垂直居中。属性值包括：normal（默认）、数字（推荐）、长度单位、百分比等。数字值会继承乘数而非固定值，确保子元素保持比例。最佳实践建议使用1.4-1.8的无单位数值优化可读性，大字体可减小行高，小字体需增大。该属性还支持单行文本垂直居中技巧，兼容所有现代浏览器。
css行高line-height的用法
LBT_lwj的博客
10-17 447
css：关于line-height在ios与安卓的不兼容处理
mosowe
02-20 2394
也是拖了很久才来写。。。。 在实际开发中发现，css的line-height属性在ios和安卓中有那么几个像素的偏移，导致两端显示不一致，我的处理方法是： 去除line-height 使用padding width: 72px; height: 28px; text-align: center; line-height: 0px; padding: 14px 0; box-sizing: border-box; height可以不写，那么就用不上box-sizing
IE FF(火狐) line-height兼容详解
jiaguo699的专栏
05-15 2380
搞个系统，前台还得自己做，我最怕做前台，不是做不好，而是我是个完美主义，我一做前台就想把网页搞的ＩＥ６，ＩＥ７，火狐一点都不差，用ＤＩＶ＋ＣＳＳ做，可是这样做的话真的有点废时间，这不今天就要搞个新闻列表，每条新闻前面都有个小图标修饰，我把每条新闻的高度，line- height设成28px，小图标作为background，发现小图标在ie下是对齐的，但是火狐下好像向上偏了一像素，想想算了，不就一像
display: block; text-overflow:clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;不生效
最新发布
12-21
此样式中的 `-webkit-` 前缀是 WebKit 内核浏览器（如 Chrome、Safari）的私有属性，在其他浏览器（如 Firefox、IE）中可能不支持。可以添加其他浏览器的前缀或使用替代方案。 ```css .element { display: -webkit-...
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 显示3行 */ line-clamp: 3; /* 标准属性，增强兼容性 */ width: 190px; overflow: hidden; white-space: normal; /* 改为 normal 以允许换行 */ text-align: left; text-overflow: ellipsis;多行省略没有生效
11-21
4. **浏览器兼容性**：`-webkit-line-clamp`是Webkit内核的私有属性，在非Webkit内核的浏览器（如Firefox、Edge）中可能不生效。可以考虑使用标准属性`line-clamp`（需要浏览器支持）或者使用其他方法如JavaScript...
Also define the standard property 'line-clamp' for compatibility
10-17
如果不需要支持旧版浏览器（如IE），则可以直接使用`-webkit-line-clamp`，并结合`display: -webkit-box`，因为最新的Firefox和Edge已经支持WebKit前缀的属性。 §§相关问题§§ 1. 如何检测浏览器是否支持`-...
CSS浏览器兼容性完全指南：HTMLCSS教程
针对特定浏览器的兼容性问题，可以使用CSS Hack，如针对IE的`*`前缀或`_`下划线，但这些做法不被推崇，因为可能引发维护问题和未来浏览器更新的兼容性问题。 8. **CSS3特性兼容性** 随着时间的推移，许多CSS3特性...
html5 line height,HTML5, Placeholder, line-height in Webkit
weixin_35686326的博客
06-25 147
问题I have an input field:with styles:input {margin: 0;padding: 0 6px;font-size: 19px;line-height: 19px;height: 36px;width: 255px;}Problem is the line-height is not taking effect for the placeholder in ...
IE7下设置行高与其它浏览器兼容解决方法
狂奔的乌龟技术博客
12-06 877
火狐下的line-height:24px;转换如下： line-height:205%!important;line-height:185%!important;
line-height用法总结
weixin_30824479的博客
01-16 437
Line-height是前端用语,经常被前端开发人员经常使用. line-height设置1.5和150%有什么区别?这是一个比较常见的前端面试题. 定义: line-height指的是文本行基线间的距离(文字尺寸和行距之间的和). 但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响. 基线: 基线(baseline),指的是一行字横排时下沿的基础线,基线并...
常用的CSS样式
weixin_43355944的博客
10-26 265
常用的CSS样式position position 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。（绝对，固定和相对定位）（absolute绝对定位相对的是第一个非正常的父元素，fixed相对于屏幕，relative相对的就是自己原来的位置） absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top",
浏览器的私有前缀
新阿巴阿巴
10-01 1399
1. 私有前缀 -moz-：代表firefox浏览器 -ms-：代表ie浏览器 -webkit-：代表chrome、safari浏览器 -o-：代表Opera浏览器 2. 提倡的写法 div { -moz-background-color: pink; -webkit-background-color: pink; -o-background-color: pink; background-color: pink; -moz-width: 400px;
【line-height】 line-height详解
热门推荐
03-27 1万+
本文摘自不同文章，楼主自己汇总集合，对比概念，相对比较全面。 楼楼自己的博客：http://blog.youkuaiyun.com/taotao6039 原文1，http://www.woaicss.com/article/div/line-height.htm 原文2，http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98
css基础--line-height二
chujinmaolu的博客
06-18 887
1、坊间流传着这么一种说法：“要想让单行文字垂直居中，只要设置line-height大小和height高度一样就可以了“。 .title { height: 24px; line-height: 24px; } 误区之一：要让单行文字垂直居中，只需要line-height这一个属性就可以，与height一点儿关系都没有。也就是说，我们直接 .title { line-height: 24px; } 就可以了，坊间传闻的说法会误导大小一定要同时设置height属性才可以。 误区二：行高
CSS的未来：一些试验性CSS属性
weixin_30247781的博客
08-23 972
但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，我们将看一下鲜为人知的CSS ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值