【css】移动端兼容 border显示不全

最新推荐文章于 2024-04-11 17:56:34 发布
最新推荐文章于 2024-04-11 17:56:34 发布
阅读量3.4k 收藏 3
点赞数 1
分类专栏： html+css 工作记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37347273/article/details/91413778
版权

小于1px的边框兼容性处理

box-shadow， border等不明原因被遮挡的问题；小于1px的边框在部分机型显示不全 或 完全渲染不出来的问题
在这里插入图片描述

border: 0.5px solid #000;
border-radius: 0.5px;

方案一 transform rotateZ(360deg)

此方法也能解决 box-shadow， border等不明原因被遮挡的问题

border: 0.5px solid #000;
border-radius: 0.5px;

// 解决ios边框显示一半的问题
transform: rotateZ(360deg);

方案二 使用UI切图实现（不推荐）

方案三 和UI沟通，尽量避免使用0.5px的边，线（推荐）

0.5px的边线在移动端渲染还有一些未知的问题，建议尽量不要使用0.5px的边线

// iphone XS 把0.5px的dashed 虚线  渲染成了 border-bottom 0.5px dotted #C4C4C9
border-bottom: 0.5px dashed #C4C4C9;

方案四 （概念方案，未验证） 使用1px的边线，设法隐藏一半

康一夏
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现0.5px线条解决移动端兼容问题(推荐)
01-18
【内容】： 1. 利用background-...style type=text/css> /*标准1px边框*/ .b1{ height: 40px; border: 1px solid #ff0000; } /*1.可以利用利用渐变样式=>实现.5px*/ .a1{ height: 1px; margin-top: 20
移动端兼容问题
06-24
在移动端Web开发中，兼容性问题是一个至关重要的挑战。开发者需要确保网页在各种不同设备、操作系统和浏览器上都能正常工作并提供一致的用户体验。本文主要围绕移动端常见的Web兼容性问题展开，包括元标签的使用、...
html如何让相邻的部分边框消失,css border属性边框一半或者部分可见
weixin_39767124的博客
06-04 2379
1.使用伪类，让Border边框显示一半2.使用绝对定位，增加边框盒子1.使用伪类，让Border边框显示一半html>使用伪类，在元素前或后插入内容div{position:relative;width:300px;height:50px;background-color:#bbb;padding:4px}div:before{content:"";position:ab...
CSS – 边框，只有边框的一半可见
weixin_49234845的博客
05-10 4626
效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> #holder { border-left: 2px solid rgba(0, 187, 150, 100); height: 200px; width: 200px; posi.
css写了边框显示不全或不显示
weixin_42220130的博客
06-13 9889
div{ width: 100%; border: solid 5px green; } 此时可能边框显示的不全不是上下左右都有，或者不显示边框， 这个是因为宽度100%再+边框超过100%了，可以把width改成100%以下就可以了。 其他原因暂时还未发现。 div{ width:97%; border: solid 5px green; } ...
css一半长度的下划线
Twoknives的博客
11-04 1588
以前写网页一直是写个span再配合相对定位，这次在uni里又得写，为了方便就没用span 两种思路，一种是用after伪类增加下划线，一种是用背景 .dog-subsection-currt::after{ content: ''; width: 40%; height: 1px; display: block; padding-top: 10upx; margin: 0 auto; border-bottom: 1px solid #00DDDD;
CSS实现半边边框（只有边框的部分可见）
Roy__Jason的博客
02-23 686
CSS实现半边边框（只有边框的部分可见）
html图片边框显示不全,css border边框显示不完全
weixin_33100393的博客
06-11 2386
css border边框显示不完全border边框显示不完全是因为大多数浏览器采用了W3C标准盒子模型，它规定一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)所以，当我们设置了border后，width变成了：100% + margin + padding + border，超过了100%，也就显示不完全了。.解决方法：div{width...
浅谈Html5移动端ios/Android兼容性总结
09-27
border: 0; -webkit-appearance: none; } ``` 在IE10中，去除输入框的清除按钮可以使用如下代码： ```css input:-ms-clear { display: none; } ``` 在处理Flex布局时，不同版本的Android可能不支持`flex-wrap:...
重置样式表reset.css和用于移动端适配的flexible.js
09-07
reset.css帮助开发者摆脱浏览器默认样式的困扰，而flexible.js则提供了强大的移动端适配能力，让页面能在各种设备上呈现出良好的用户体验。了解并掌握这两项技术，对于提升网站的兼容性和用户体验至关重要。
移动端底部弹框js及css
11-08
在移动端开发中，底部弹框（通常称为Modal或Bottom Sheet）是一种常见的用户界面元素，用于显示重要的信息、操作选项或提示。这篇资源提供了一个关于如何使用JavaScript（js）和层叠样式表（css）实现移动端底部弹框...
css边框只显示一半,CSS：边框只有一半作品
weixin_42607969的博客
08-03 2341
我正在使用CSS创建一个围绕内容的边框，但只有角落图像显示，而不是重复的顶端或底部。CSS：边框只有一半作品.blog {-moz-border-image: url(divborder.png) 30 27 27 repeat;-webkit-border-image: url(divborder.png) 30 27 27 repeat;-o-border-image: url(divbord...
使用border-radius出现缺角的问题
qq_43967413的博客
04-02 4620
一个关于border-radius方面 BUG 手鲁了一个简单的搜索框： 因为需要用到输入的功能，所以理所当然想到了input。因为还要添加按钮，所以就用了一个div做了一个button,个人喜欢圆角的边框那就加上了。 然后出现了以下的问题。 第一个是没有添加border-radius的时候。第二个是添加了border-radius。代码如下。 /* CSS */ .search{ --...
CSS-微信小程序-部分ios机型按钮border丢失
weixin_43937466的博客
10-09 1636
问题： 部分ios机型按钮border丢失，部分手机浏览器不能识别0.5px，当做0处理。 在iPhone 11 Pro Max上显示效果如下图 详情参考：https://timor419.github.io/2020/10/09/CSS-border/#more 产生这样的代码如下： WXML <view class="second-time flex-row> 文案 </view> WXSS .second-time { width: 162rpx;
css设置border-radius圆角缺少遮挡问题
hjww_01的博客
03-06 1234
css样式设置border-rradius后，圆角缺少、遮挡问题
iOS下border一半不显示问题
weixin_43993766的博客
04-16 2828
如图区域， 1.在做点击评价的时候，刚开始遇到下边选择标签左边border显示不全（仅在iOS下电脑和安卓显示完全正常）， 解决方法：没有写宽高，使用padding将内容撑开，解决 2.又一次遇到问题，在刚开始拿的ios上显示正常（百度解释为当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug）。所以部分手机存在问题。自己也试了试改变宽就好了。 解决方法：小姐姐提供 元素position:relative; &::before { position: absolut.
元素显示模式 盒子模型 flex布局
weixin_73503532的博客
01-08 253
元素显示模式 盒子模型 flex布局
CSS 1PX Border问题解决
最新发布
hawk2014bj的博客
04-11 358
CSS Border 在不同的设备，显示的宽度会不一致，原因就在于像素比，现在显示器动辄就 2k或者 4k，物理像素比逻辑像素都会大，CSS 用的是逻辑像素。CSS Border 就会看起来比设计稿宽，所以一般Border像素都会缩小 50%。做法主要有背景图片、CSS 伪元素和视口缩小，背景图在某些设备上可能会发虚，这里我们就看一下伪元素和视口的方式。
iframe移动端显示不全
05-27
如果在移动设备上使用 iframe，有时会出现显示不全的问题。这可能是因为 iframe 内容的宽度超出了移动设备的屏幕宽度。 你可以尝试使用 CSS 中的“viewport”元标签来解决这个问题。在 head 标签中添加以下代码： ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` 这会将页面的宽度设置为设备的宽度，并使页面在移动设备上正确显示。你也可以使用 CSS 的 @media 查询来针对不同的设备宽度设置不同的样式，以确保 iframe 在不同设备上都能正确显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值