gpt4 book ai didi

html - border-radius 和 Internet Explorer 有什么问题?

转载 作者:行者123 更新时间:2023-11-27 23:38:15 25 4
gpt4 key购买 nike

当我在 Chrome 或 Firefox 中使用 border-radius 时没有问题。但是对于 IE 11,当我的 div 调整大小时我遇到了一个大问题。

在 IE 上,它呈现为调整大小时的样子: https://ibb.co/ft2TB3r

但是如果我切换选项卡/窗口、检查或向下滚动(不再看到我的 div)并返回到它,它呈现得很好: https://ibb.co/SdTWMgz

这是我的简单代码:

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("body").on("click", function() {
$(".div2").css({ 'display' : ''});
});
</script>
<div style="background-color: black !important; width: auto; height: auto; margin: 0px 100px; border-radius: 0 0 500px 500px/0 0 100px 100px;">
<div class="div1" style="height: 400px; width: auto">

</div>
<div class="div2" style="height: 400px; width: auto; display: none !important;">

</div>
</div>
</body>

谁能给我解释一下?请问如何解决?

谢谢!

解决方案:

IE 似乎需要一个边框。所以将它添加到带有 border-radius 的 div 中:border: 1px 纯色透明

在此处找到修复:https://stackoverflow.com/a/47869518/10345897

最佳答案

网页只是一组描述网站外观的说明。它的解释方式可能因浏览器而异。

下面是一个查询的快速解决方案:

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("body").on("click", function() {
$(".div2").css({ 'display' : ''});
$(".div1").css({ 'border-radius' : '0'});
});
</script>

<style>
.div1{
background-color: black;
width: auto;
height: auto;
margin: 0 100px;
border-radius: 0 0 500px 500px/0 0 100px 100px;
}

.div2{
background-color: black;
width: auto;
height: auto;
margin: 0px 100px;
border-radius: 0 0 500px 500px/0 0 100px 100px;
}
</style>

<div style="">
<div class="div1" style="height: 400px; width: auto">

</div>
<div class="div2" style="height: 400px; width: auto; display: none !important;">

</div>
</div>
</body>

希望能帮助您回答问题。

关于html - border-radius 和 Internet Explorer 有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57147891/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com