gpt4 book ai didi

css - webkit-overflow-scrolling 隐藏了绝对定位的 div

转载 作者:技术小花猫 更新时间:2023-10-29 11:13:00 28 4
gpt4 key购买 nike

我先给出示例和屏幕截图:

HTML:

<div class="add-link-box">
<div class="add-link-box-close-button" id="add-link-box-close-button">X</div>
<form name="add-link" id="add-link-form" method="post" action="" enctype="multipart/form-data">
<div style="width: 90%;" class="alink-field">Add A Link</div>
<div class="mobile-form-frame" id="mobile-form-frame">
<div class="alink-field mobile-alink"><label for="link-url">Link Address:</label></div>
<div class="alink-field"><input type="text" name="linkurl" id="link-url" class="add-link-form"
placeholder="www.awebsite.com"></div>
<div class="alink-field mobile-alink"><label for="link-description">Link Description:</label></div>
<div class="alink-field"><input type="text" name="linkdescription" id="link-description" class="add-link-form" placeholder="my
website"></div>
<div class="alink-field mobile-alink"><label for="link-image">Link Image:</label></div>
<div class="alink-field"><input type="file" name="linkimage" id="link-image" class="add-link-form"></div>
<div class="alink-field"><input type="button" name="submit" value="Submit Link" class="add-link-form" id="add-link-submit"></div>
<div class="alink-field"><input type="reset" name="reset" value="Clear" class="add-link-form" id="reset"></div>
</div>
</form>
</div>

CSS:

.add-link-box{border: 2px #006BB5 solid; color: #006BB5; font-family: bonvenocf; text-align: center; font-size: 16pt; margin: 10px; height: 90%; margin-top: 30px; overflow: auto; -webkit-overflow-scrolling: touch;}

.mobile-form-frame{overflow: auto; height: 90%;}

.add-link-box-close-button{position: absolute; display: block; right: 5px; top: 5px; width: 20px; height: 20px; padding: 2px; line-height: 18px; font-size: 18pt; text-align: center; cursor: pointer; font-weight: bold; color: #FF0000;}

.add-link-box-close-button:hover{color: #FF0000;}

.alink-field{width: 90%; margin: 0px; display: block; padding: 10px; margin-left: auto; margin-right: auto; text-align: center;}

.mobile-alink{text-align: left;}

问题是:

mobile-form-frame 类中添加 -webkit-overflow-scrolling: touch; 时(为了在 iOS 设备上实现原生滚动),“X"来关闭这个 div 是隐藏的。如果我们删除 -webkit-overflow-scrolling: touch;,它不会。我已经做了一些搜索,但真的找不到其他人遇到过同样的问题。我不明白为什么这会导致绝对定位的 div add-link-box-close-button 从 View 中被遮挡。谁能帮我解决这个问题?它实际上是 iOS 上 Safari 中的错误吗?

我附上了屏幕截图来展示我遇到的结果。

编辑:上面的 html 包裹在容器 div 中,position: fixed;

Correct Display (Shown in Chome devtools) Incorrect display via screenshot on iOS 9.0.2

最佳答案

使用这个 CSS

.add-link-box {
position: relative;
}

关于css - webkit-overflow-scrolling 隐藏了绝对定位的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32927142/

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