关于低版本chrome的position定位后overflow隐藏的问题

关于低版本chrome的position定位后overflow隐藏的问题

睫毛上残留的泪 发布于 2021-11-24 字数 1560 浏览 818 回复 12

   在360浏览器6.2版本(chrome内核版本21.XXX)中yudao遇到一个奇葩bug....给父元素设置圆角(border-radius),然后给其加position定位之后并设置overflow:hidden ,接着bug出现了,,  子元素超出父元素的边角居然没有隐藏,去掉position 后又正常.

 看图:

 360奇葩

  

 问题:有什么方法在不去掉position和不设置子元素圆角的情况下 让子元素超出父元素的边角隐藏呢??? 跪求!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
  *{
	 margin:0;
	 padding:0; 
	  }
 .out{

	border-radius:50%;
	position:fixed;
	left:50%;
	height:182px;
	width:182px;
	marign:auto;
	overflow:hidden;
	border:5px solid #FFF;
	background:#FFFFFF;
	 }	  
	 .inner{
		width:250px;
		height:180px;
		background:#FF6600;
		 }
</style>
</head>

<body style="background:#666666;">
<div class="out"><div class="inner"></div></div>
</body>
</html>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(12

复古式 2021-12-01 12 楼

我表示也遇见

一笔一画续写前缘 2021-12-01 11 楼

360 份额第二了呀 , 仅仅次于IE ,你叫我忍痛割爱??做不呀~~~

自此以后,行同陌路 2021-12-01 10 楼

回复
乖,大家都放弃支持360,他的份额就是零了..

回眸一笑 2021-12-01 9 楼

遵循标准,放弃IE,放弃360,珍惜生命

绝影如岚 2021-12-01 8 楼

IE 、FF、chrome都正常 , 360浏览器6.2版是也是基于chrome的,不过版本很低, 360浏览器现在普罗大众用得多呀~~

带上头具痛哭 2021-12-01 7 楼

回复
你要兼容360说明你要兼容使用ie的人说明你要兼容ie6,7,8说明你写的border-radius无效

绝影如岚 2021-12-01 6 楼

回复
没看到我写的咩 ~~~ 6.2版是基于 chrome内核的啊 , 没看到父级圆角咩~~~ 晕

混吃等死 2021-12-01 5 楼

回复
一根筋...

妖妓 2021-12-01 4 楼

测试下IE和CHROME呗,为什么一定要纠结山寨浏览器呢?

永不分离 2021-12-01 3 楼

6.2 是 chrome 的 , 不支持html5 父元素哪来的圆角呀 大哥 没看到白色的圆角么

疾风者 2021-11-28 2 楼

360浏览器应该是IE8吧, 不支持html5才对呀...

双负五.

输什么也不输骨气 2021-11-26 1 楼

  终于懂了 ,这是老版本 -webkit-的一个bug,只能再套一个父级标签,设定position即可...