OGeek|极客世界-中国程序员成长平台

标题: html - iOS 8.3 字段集边框错误 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 07:24
标题: html - iOS 8.3 字段集边框错误

我正在尝试设置字段集边框的样式，但由于某些原因在 iOS 8.3 中它无法像其他浏览器一样工作，我已经在 android/PC/mac 上测试了相同的代码，并且它们都可以正常工作他们应该，但是在 iOS 8.3 中，边框要么消失，要么根本不显示，这里是 jsfiddle 的链接在 iOS 8.3 中显示 Safari/chrome 中的错误。

在我看来这是页面缩放工作方式的错误，如果没有元视口(viewport)并且文本非常小，则边框会显示，但是一旦您设置视口(viewport)和/或缩放边框就会消失。

我已经测试了使用不同的 css 规则设置边框样式的不同方法，例如 (border:/border-width/border-top-width)，但它们都不起作用。

有没有人可以解决这个问题？

<style>
.border {
    border-width:1px;
    border-style:solid;
    border-color:#000;
}
.border2 {
    border: 1px #000 solid;
}
</style>
<fieldset class="border1">
    <legend>border1 not working</legend>text content</fieldset>
<br></br>
<fieldset class="border2">
    <legend>border2 not working</legend>text content</fieldset>
<div class="border">border1 working</div>
<div class="border2">border2 working</div>

更新 1

删除图例标签可以解决边框问题，但这不是可接受的解决方案。

更新 2

iOS 9.0 修复了该错误。

---

Best Answer-推荐答案

到目前为止，使用以下 CSS 规则修复了该错误。

fieldset {
    padding-top:10px;
}
legend {
    float:left;
    margin-top:-20px;
}

不 float 图例标签字段集边框不会显示。

关于html - iOS 8.3 字段集边框错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30514021/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://sqlite.in/)

Powered by Discuz! X3.4