<hr> nicht auf IOS Safari und normalen Android-Browser überhaupt angezeigt.

Question

So habe ich ein:

<div class="divHr"> 
<hr size="0.01"> 
</div> 

.divHr hr{ 
display: block; 
width: 100%; 
border-top: 0.25px dotted #CCCCCC; 
} 

Wenn ich es auf Chrome/IE/Firefox sehen - zusätzlich es funktioniert großartig auf Google Chrome auf mobilen Geräten. Wenn ich die Site auf Safari (IOS) oder den Standard-Android-Browser betrachte, wird der HR überhaupt nicht angezeigt. Ich habe versucht, den Rahmen nicht mit border: 0px; anzuzeigen und die size="0.01" zu 1 ändern, aber es wird immer noch nicht angezeigt - so ist es kein Problem mit Grenzen. `

Ich würde wirklich einige Hilfe zu diesem einen, danke Jungs!

Answer 1

Ich habe das nicht vor mir selbst erlebt, aber wenn ich mit IOS arbeite und so füge ich immer appearance: none; in mein CSS ein.

Ich hoffe, das funktioniert für Sie.

Weitere Informationen über das Aussehen Eigenschaft https://css-tricks.com/almanac/properties/a/appearance/

Mit freundlichen Grüßen,

Answer 2

Okay, so fand ich eine Lösung. Statt <hr> nur der Verwendung eines div und Stil es so machen:

.hrDiv{ 
border-top: 1px dotted #CCCCCC; 
width: 100%; 
height: 0.01px; 
border-top-style: dotted; 
border-left: none; 
border-right: none; 
border-bottom: none; 
color: #CCCCCC; 
display: block; 
border-color: #CCCCCC; 

}