letter-spacing: -1px；在ios设备Safari上不生效问题

已于 2025-04-02 12:21:05 修改
阅读量210 收藏
点赞数 1
文章标签： safari 前端 浏览器兼容
于 2025-04-02 12:13:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhangluo/article/details/146941104
版权

设备类型为ios15，版本17.6.1

当text-rendering: optimizeLegibility;和letter-spacing: -1px;结合使用的在ios设备会导致英文字间距没有缩小。

奇怪的是两者官方都显示支持Safari，当去掉text-rendering属性字间距显示正常

Z~J~Q
关注
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1341
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
[CSS]解决安卓和ios ，样式或其他兼容问题
热门推荐
iChangebaobao的博客
11-08 1万+
input \button 样式问题 , ios用的样式不管用。 解决方法：在css样式里面加 .input{ -webkit-appearance: none;/*解决ios样式问题*/ } ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态 解决方法：禁止页面缩放 <meta content="yes" name="apple-mobile-web-a...
css transtion不生效_深入理解CSS过渡transition
weixin_42347535的博客
12-24 768
前面的话通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识定义过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function...
CSS---经常被忽略，但使用广泛的常用CSS样式片段总结
COCOLI_BK的博客
07-29 333
11、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）多行文本溢出显示省略号2、中英文自动换行3、文字阴影text-shadow为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。属性与值的说明如下4、设置placeholder的字体样式5、不固定高宽div垂直居中的方法6、解决IOS页面滑动卡顿7、设置滚动条样式8、实现隐藏滚动条同时又可以滚动9、css绘制三角形注如果想绘制右直角三角，则将左border设置为0；12、移动端软键盘变为搜索方式。...
css篇（技术总结 持续更新）
程序员创业中
04-30 1438
20200102 element-ui卡片头部样式修改 原因解析：直接在当前页覆盖.el-card__header样式发现并未生效，scoped私有化导致的。去除scoped即可，但是全局的卡片头部样式都跟着修改了。解决办法：曲线救国 自定义样式 <div class="card-header">我是标题</div> .card-header { margin: ...............
灵活运用CSS开发技巧（转载）
xuehu837769474的博客
02-24 1556
何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物...
前端面试题归类-css
肥晨开发的学习之路
01-02 669
网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！ 盒模型 说下盒模型? 有两种盒模型，W3C盒模型和IE盒模型。通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为 content-box。当浏览器未设置<!doctype>声明时，盒模型都为 border-box。 通过 css3 的box-sizing属性，可以更改元素...
经常用到 css 样式总结
qq_34703156的博客
07-13 387
1、文字超出部分显示省略号 单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本溢出显示省略号 p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflo...
第二章 CSS基础 HTML+CSS
www
03-20 2186
CSS 参考 - CSS：层叠样式表 | MDN使用此 CSS 参考页面以浏览按字母索引的所有标准 CSS 属性、伪类、伪元素、数据类型、功能表记以及@ 规则。outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似。
【CSS】1062- 49 个常用 CSS 样式清单整理
pingan8787
08-27 327
来源 ：https://www.mdeditor.tw/pl/pSGX1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）p{ width:200rpx; ...
49个常用的CSS代码片段
m0_67846661的博客
05-26 441
1、文字超出部分显示省略号 单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行文本溢出显示省略号 p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2605
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
Vue 品牌列表自定义局部指令
mqingo的博客
01-07 558
  09品牌列表自定义局部指令.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scal
html和css基础整理
weixin_68658847的博客
09-03 614
html和css基础整理
实现在h5中添加日历提醒：safari唤起系统日历，其它浏览器跳转google日历
weixin_51002293的博客
04-29 431
点击按钮后，将设定的一些信息插入到系统日历的日程安排中。
16前端项目----交易页
2401_83475219的博客
05-10 745
商品清单展示、订单提交等功能。使用reduce方法计算商品总数和总价。为了方便管理大量接口，在main.js中统一引入所有请求函数并挂载到Vue原型上。
空值运算符最佳实践清单（适用于 Vue 项目）
字节叔叔
05-07 118
建议理由优先使用?替代深层&&判断更清晰、简洁展示用户数据或接口返回值时配合??提供默认值防止界面空白或崩溃表单初始值统一使用??''处理避免 uncontrolled 警告在 computed / methods 中统一处理空值逻辑保持模板整洁编写公用函数封装复杂的空值获取提升代码复用性。
Webug4.0靶场通关笔记-靶场搭建方法（3种方法）
最新发布
mooyuan的网络安全博客
05-10 589
Webug4.0 是国内安全团队开发的一款专注于Web应用安全的渗透测试实战平台（靶场），适合网络安全学习者从入门到进阶的实战训练，本文讲解3种搭建webug4.0靶场的方法。
下列样式定义字体间距为0.5倍间距、水平左对齐、垂直顶端对齐、有下划线 正确的定义是：（ ） A、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：top；text-align：left； } B、 p{text-decoration：0.5em；letter-spacing：underline；vertical-align：top；text-align：left； } C、 p{text-decoration：left；letter-spacing：top；vertical-align：0.5em；text-align：underline； } D、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：left；text-align：top； }
06-03
正确的定义是 A、p{text-decoration：underline；letter-spacing：0.5em；vertical-align：top；text-align：left； }。 在CSS中，可以使用`letter-spacing`属性来定义字体间距，使用`text-align`属性来定义水平对齐方式，使用`vertical-align`属性来定义垂直对齐方式，使用`text-decoration`属性来定义下划线。根据题目的要求，可以将这些属性组合成一个CSS样式，如下所示： ```CSS p { letter-spacing: 0.5em; text-align: left; vertical-align: top; text-decoration: underline; } ``` 其中，`letter-spacing`属性的值为0.5em，表示字体间距为0.5倍间距；`text-align`属性的值为left，表示水平左对齐；`vertical-align`属性的值为top，表示垂直顶端对齐；`text-decoration`属性的值为underline，表示有下划线。 因此，选项A中的CSS样式是正确的，选项B、C、D中的CSS样式都存在语法错误或属性值错误，不符合要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值