not displaying at all on IOS Safari and regul

Question

So i have a:

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

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

If i view it on Chrome / IE / Firefox - additionally it works great on google chrome on mobile devices. If i view the site on Safari (IOS) or the standard Android Browser, the HR doesn't display at all. I have tried not displaying the border using border: 0px; and changing the size="0.01" to 1, but it still doesn't display - so it isn't a problem with borders. `

I'd really appriciate some help on this one, thanks guys!

Answer 1

Okay, so i found a solution. Instead of using <hr> just make a div and style it like this:

.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;

}

Answer 2

I have not experienced this before myself, but when working with IOS and such I always add appearance: none; into my CSS.

I hope this works for you.

More information about the appearance property https://css-tricks.com/almanac/properties/a/appearance/

Best regards,