border-radius兼容360问题

最新推荐文章于 2022-07-12 15:17:27 发布

爱不到要偷

最新推荐文章于 2022-07-12 15:17:27 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangweigang/p/10451782.html

本文详细介绍了如何解决CSS3在360浏览器兼容模式下的显示问题，通过使用不同前缀的border-radius属性以及添加<meta>标签，实现了在各种IE版本下的样式兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在360兼容模式下的浏览网页就乱了，问题是css3在各浏览器都有所适应的样式，

border-radius:20px;

-webkit-border-radius:20px;

-ms-border-radius:20px;

-o-border-radius:20px;

-moz-border-radius:20px;

最后加上<meta http-equiv="X-UA-Compatible" content="IE=edge">就可以在兼容模式下切换各种IE版本，查看是否兼容，

问题解决了！

转载于:https://www.cnblogs.com/zhangweigang/p/10451782.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱不到要偷

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

09-25

总的来说，`border-radius`是CSS3中一个非常实用且富有表现力的特性，它极大地提升了网页设计的灵活性和美观度，同时也需要注意不同浏览器的兼容性问题。通过结合使用标准属性和浏览器私有属性，开发者可以确保在...

css3中border-radius使ie和360浏览器兼容模式

测试

10-24

198

360浏览器好垃圾,竟然默认兼容模式，css3好多不支持。从网友中得到这样的的答案，太给力了 document.querySelectorAll('.github-emoji') .forEach(el => { if (!el.dataset.src) { return; } ...

参与评论您还未登录，请先登录后发表或查看评论

border-radius IE8兼容处理

有问题可关注公众号：前端研究院后台输入问题回复

10-09

2315

根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv=...

前端：解决使用border-radiuse无效

weixin_44899642的博客

07-12

490

今天准备使用半圆形导航条来动态转化页面但是半圆效果一直展示不出来，后来查阅资料才得知使用!important可以解决问题语法为：界面：在ie7及ie7+,firefox,chrome等浏览器下，已经可以识别 !important属性，但是IE 6.0IE6及更早浏览器下仍然不能完全识别。important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0

html页面360极速浏览器不兼容,html页面在360极速浏览器样式不兼容

weixin_35501172的博客

06-03

1108

在此并不从整体的角度来阐述，只是简单得记录下今天花了一个下午的时间才解决的问题。下面是在360兼容模式的显示：99.png而在火狐浏览器、360浏览器的极速模式、甚至IE浏览器中显示都是正常的，如下图所示：98.png这让我很郁闷，都说360浏览器用的是IE内核，IE都可以了它怎么就不行呢。从效果上看，显示出错的页面：margin-left、border-radius、box-shadow都出了问...

border-radius 不起作用的解救方法

qq_42744839的博客

12-09

7887

在语句中加入!important ； border-radius: 10px !important ; !important，作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级...

360兼容性 border-radius: 10px; 不生效

最新发布

06-10

-引用[3]提到IE8的兼容问题，但360浏览器的兼容模式如果模拟到IE8，则同样可能不支持border-radius，需要借助PIE.htc（但注意，360浏览器的极速模式不需要此方案）。**解决思路：**1.确认360浏览器的模式（兼容模式...

#searchLoading{ display: none;height: 15px;width: 15px;border-radius: 50%; border: 2px solid #0d309a;border-right: 2px solid #fff;border-bottom: 2px solid #fff; animation: spin 1s linear infinite; } @keyframes spin { 0% {rotate: 0deg} 100% {rotate: 360deg} }这个代码对吗

03-11

display、height、width、border-radius这些属性都没问题。border的设置看起来也正确，四个边框中右边和下边是白色，其他是蓝色。然后是animation属性，引用了spin动画，持续1秒，线性，无限循环。这些参数看起来是...

#loader { position: absolute; left: 50%; top: 10%; z-index: 1; /*width: 20px;*/ /*height: 20px;*/ margin: -25px 0 0 -25px; border: 6px solid #f3f3f3; border-radius: 50%; border-top: 6px solid #00A76F; border-bottom: 6px solid #00A76F; width: 50px; height: 50px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

06-02

5. `border-radius: 50%;`：将元素的边框设置为圆形。 6. `border-top: 6px solid #00A76F;` 和 `border-bottom: 6px solid #00A76F;`：定义元素的顶部和底部边框的颜色为 #00A76F。 7. `width: 50px;` 和 `height...

<video :src="item.videoUrl" :poster="item.origin" controls="false" playsinline webkit-playsinline style="width: 146upx; height: 146upx; border-radius: 14upx;"></video>要求隐藏控件

04-02

注意，在 Android 移动端上，默认情况下可能仍然会显示某些系统级控件或存在兼容性问题[^2]。 #### 方法二：基于 Vue.js 的解决方案当集成到 Vue 应用程序时，推荐按照官方文档说明初始化实例对象，并传递选项参数...

解决border-radius溢出问题以及overflow:hidden隐藏失效问题

weixin_42637336的博客

12-12

5603

今天在开发项目时遇到了border-radius的溢出问题，当我给外层ul设置一个border-radius时，内层li的内容就出现了溢出问题，会超过外层的border-radius。解决方案1：在父元素ul的样式中添加overflow:hidden，这样超过ul的元素就会被隐藏。效果：解决方案2：给子元素li添加与外层ul相同弧度的border-radius。效果：就变成了...

table td 文字显示两行，并且以…结尾，在360兼容模式不兼容解决方案。

qq_25445369的博客

12-20

4956

table td 文字显示两行，并且以…结尾，在360兼容模式不兼容解决方案。这是一个div里面包括table。<div style="margin-left: -16px;width:850px;"> <table class="right-table" id="tableT" border="0" style="mar

css在360浏览器的兼容问题

蓝色的风

07-17

1万+

在此并不从整体的角度来阐述，只是简单得记录下今天花了一个下午的时间才解决的问题。下面是在360兼容模式的显示：而在火狐浏览器、360浏览器的极速模式、甚至IE浏览器中显示都是正常的，如下图所示：这让我很郁闷，都说360浏览器用的是IE内核，IE都可以了它怎么就不行呢。从效果上看，显示出错的页面：margin-left、bor

border-radius属性失效问题的解决办法