<hr>在 IOS Safari 和常规 android 浏览器上根本不显示. [英] <hr> not displaying at all on IOS Safari and regular android browser.

问题描述

所以我有一个:

<hr size="0.01">
.divHr 小时{显示:块；宽度:100%；边框顶部:0.25px 虚线 #CCCCCC；}

如果我在 Chrome/IE/Firefox 上查看它 - 另外它在移动设备上的 google chrome 上效果很好.如果我在 Safari (IOS) 或标准 Android 浏览器上查看该站点，则 HR 根本不显示.我尝试不使用 border: 0px; 显示边框并将 size="0.01" 更改为 1，但它仍然不显示 - 所以它不是边界问题.`

我真的很想在这方面提供一些帮助，谢谢大家！

解决方案

好的，所以我找到了解决方案.而不是使用 <hr> 只是制作一个 div 并像这样设置样式:

.hrDiv{边框顶部:1px 虚线 #CCCCCC；宽度:100%；高度:0.01px；边框顶部样式:虚线；左边界:无；边界右:无；边框底部:无；颜色:#CCCCCC；显示:块；边框颜色:#CCCCCC；

}

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!

解决方案

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;

}

这篇关于<hr>在 IOS Safari 和常规 android 浏览器上根本不显示.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！