移动端border失效

最新推荐文章于 2023-04-26 15:03:02 发布
最新推荐文章于 2023-04-26 15:03:02 发布
阅读量772 收藏
点赞数
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35438535/article/details/108254153
版权

原因

昨天有个项目，测试跟我说分享到微信打开时border失效了，然后我用自己的另一个手机打开测试链接发现不在微信打开border也失效了，我还觉得奇怪，还有浏览器不兼容border的吗？？？
在这里插入图片描述
在我目前还算短暂的职业生涯里没遇到过啊，啊，我果然是一个只会切图的小菜鸟！

研究了一下，主要是因为我是用rem写的移动端，在写border的样式的时候纠结了一下border的1px是直接写1px呢还是转成rem，于是我转成了rem，于是就出现了bug…

在这里插入图片描述简单来说就是border最小宽度为1px，我把1px转换成rem之后，在某些机型下，当rem转换成px小于1时就会出现失效的问题。border太小时不能用转成rem用！！！

解决办法

把border直接写1px，不要转化成rem

lxx-sissi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决border-radius失效问题
12-09
解决border-radius失效问题
移动端常用的border.css
04-01
移动端常用的border样式，来源于【Vue 去哪儿网】
移动端安卓手机不能识别border 0.5px解决方案
cy_619的博客
05-19 6786
由于安卓手机无法识别border 0.5px，因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现，原理：将伪元素的宽设为200%，height设为1px通过-webkit-transform:scale（.5）来进行缩小一倍，这样就得到border为0.5的边框，案例：.ce{ position: relative; } .ce
div style属性中设置其border无效是什么情况如何解决
09-25
做网页的朋友会遇到div style属性中设置其border无效的情况，这是怎么回事呢？切记：一定要border的样式，宽度，颜色都要设置才可以生效的，遇到类似情况的朋友可以参考下
border样式失效原因
cang23456_博客
03-11 1613
一定要border的样式，宽度，颜色都要设置才可以的！！ <div style="border-width:2px; border-style:solid; border-color:red;">111</div> 也可以这样写： <div style="border:2px solid red;">111</div>
为什么div设置其border无效？
weixin_30783913的博客
04-17 1089
<div style="border-width:2px; border-style:solid; border-color:red;">111</div> 一定要border的样式，宽度，颜色都要设置才可以的！！ 也可以这样写：<div style="border:2px solid red;">111</div> 转载于:https://www....
给tr设置border无效怎么办
lucky__peng的博客
04-25 1077
tr设置border无效时，给tr所在table的css样式加上 border-collapse: collapse;
border-radius失效
12-05
然而，有时候我们可能会遇到`border-radius`失效的问题，导致元素的边角无法按照预期显示为圆形或椭圆形。这通常是由多种因素引起的，下面我们将详细探讨这些可能的原因及其解决方案。 1. **CSS优先级问题**：如果...
vant+vue初始化移动端项目，border样式重置：border.css
05-05
vant+vue初始化移动端项目，border样式重置：border.css
解决移动端border问题 可定义任意单边框到全边框、圆角、虚线以及分割线等样式.zip
最新发布
01-15
在移动端开发中，由于屏幕尺寸和设备像素比的差异，CSS中的`border`属性有时会出现渲染不一致的问题。本文将详细探讨如何通过CSS解决这些问题，包括定义任意单边框、圆角、虚线以及创建分割线等样式。 首先，我们要...
移动端1像素问题
01-23
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
border竟然失效，兼容性问题
qq_38992657的博客
12-21 3769
border在有的机型中失效了。原来是因为border 不可以用rem哦。
border在部分移动端浏览器下不显示边框的解决方案
小疯癫丶先森的软件编程之路
05-31 9706
博主在做项目途中遇到的问题，归为问题解决、或者杂谈。有问题请指出谢谢。 RT，我设置的是0.5px的边框，部分浏览器可以显示，部分浏览器不显示，经过调试得出，移动端浏览器最低支持1px的边框，也有解决方法，那就是写行内样式。 ...
解决项目初始化reset.css_rem——625%和 border.css
Tom__cy的博客
06-10 527
border.css @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bo...
flexible
郑州彭于晏
07-12 819
flexible.js (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12
解决安卓不能识别border 0.5px问题
分享前端知识，记录前端进阶
04-26 431
width height border-radius border 要按照两倍设置。问题：css边框，设置0.5px，安卓不显示。解决：添加伪元素，设置边框1px，然后缩放。
为表格中 tr 添加 border 无效问题
PorkCanteen的博客
11-22 1723
在给表格中 添加 border 时发现并没有显示出来。 tr{ border-bootom:1px solid #e5e5e5; } 解决方式为给 table 标签添加如下样式： table { border-collapse: collapse; } border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。 合并（collapsed ）模式下，表格中相邻单元格共享边框。 分隔（separa
border-radius属性失效问题的解决办法
热门推荐
祈澈菇凉
10-23 3万+
今天调试项目的时候突然发现，设置的border-radius竟然失效了，打开f12，眼看着浏览器把这个属性也给划掉了，不是一般的郁闷，按照道理来说，不应该会出现这样神奇的bug。 图片.png css代码： #photo{ width: 80px; height:80px; border-radius:10px ; } 解决办法：万能的!im...
border消失问题
晨曦月的博客
09-07 1755
有时候border是1px的宽度，但是用rem转换之后，在app里面显示是有问题的，所以一般border不要用rem来表示，就直接用1px。
border-radius 失效
07-28
对于 border-radius 失效的问题，有几种可能的原因和解决方法。 1. 检查元素是否具有正确的 CSS 属性和值。确保您已正确指定了 border-radius 的属性和值，例如： ```css .element { border-radius: 10px; } `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值