2015-05-28 2 views
1

Я пытаюсь создать границу поля fieldset, но по какой-то причине в iOS 8.3 он просто не работает, как хотелось бы, остальным браузерам, я тестировал один и тот же код на android/PC/mac и все из них работают так, как должны, однако в iOS 8.3 граница либо исчезает, либо вообще не отображается, вот ссылка на jsfiddle, которая показывает ошибку в Safari/chrome в iOS 8.3.iOS 8.3 fieldset border bug

Мне кажется, что это ошибка, связанная с тем, как работает масштабирование страницы, если нет мета-видового экрана, и текст действительно маленький, появляется граница, но как только вы настраиваете видовое окно и/или увеличиваете масштаб, граница исчезает.

Я тестировал различные способы стилизации границы с использованием различных правил 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 исправлена ​​ошибка.

+0

По какой-то причине форматирование вашей ссылки не работает. Возможно, у вас слишком много пробелов перед [1]; это заставляет его отображать его как код. – BSMP

+0

Спасибо, я исправил форматирование. – Kise

ответ

0

Использование следующих правил CSS исправляет ошибку до сих пор.

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

без плавающей надписи легендарного поля границы поля не будет отображаться.

Смежные вопросы