< HR>在IOS Safari和常规的Android浏览器上完全不显示。 [英] <hr> not displaying at all on IOS Safari and regular android browser.

问题描述

因此，我有一个：

 < div class =divHr> 
< hr size =0.01> 
< / div> 
 
 .divHr hr {
 display：block; 
宽度：100％; 
 border-top：0.25px dotted #CCCCCC; 
} 
  

如果我在Chrome / IE / Firefox上查看它 - 谷歌铬在移动设备上。
如果我在Safari（IOS）或标准Android浏览器上查看网站，则HR根本不显示。
我尝试不使用 border：0px; 显示边框，并更改 size =0.01到1，但它仍然不显示 - 所以它不是边界问题。 `

我真的会在这件事上给一些帮助，谢谢你们！

好的，所以我找到了解决方案。
而不是使用< hr> ，只需制作一个div并将其设置为这样：

  .hrDiv {
 border-top：1px dotted #CCCCCC; 
宽度：100％; 
 height：0.01px; 
 border-top-style：虚线; 
 border-left：none; 
 border-right：none; 
 border-bottom：none; 
颜色：#CCCCCC; 
 display：block; 
 border-color：#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屋！