Question

正如标题所解释的那样，我在显示<hr>行时遇到了一些问题。

在IE 7,8,9，谷歌浏览器，Opera Safari中，没有问题，只有一个不支持像阴影等CSS3效果。

我正在尝试做的是，通过添加该行来分隔一些新闻文章，但在Firefox中该行不在容器中，就像有位置：absolute;和padding: 500px; < / p>

这是我的html标记：

    <div class="container">

            <div class="main-content-container">
            <div class="article-container">
<div class="article-header">
<p class="article-count">0</p><p class="article-categories">1,2, 3, 4, 5</p>
<h1 class="article-title"><a href='#'>Lorem Ipsum is simply dummy</a></h1>
<p class="article-auth-date">2013 Apr 06</p>
</div> <!-- end of article-header -->

<img alt="bla bla bla" src="http:/localhost/uploads/test.png" style="border: none;">

<div class="article-post">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><!-- end of article-post-->
</div>

<hr class="fancy-hr">           
</div><!-- end of article-container -->
</div><!-- end of main-content-container -->

 <aside></aside><!-- end of aside -->

 </div><!-- end of container -->

这就是CSS：

.main-content-container {
            float:left;
            margin: 5px 0 0;
            padding: 0;
            width: 660px;
            height: 800px;
            background-color: white;

            -moz-box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
            -webkit-box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
            box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
            border: 1px solid #818080;

.article-container {
    float: left;
    margin: 20px;
    padding: 0;
    width: 615px;
}

    .article-header {
        float: left;
        margin: 0;
        padding: 5px 0 0 ;
        width: 100%;
        height: 50px;
        margin-bottom: 20px;
    }

.article-post {
        border-top:1px solid #D3D3D3;
        text-align:justify; 
        padding:3px; 
        margin-top:3px; 
        margin-bottom:5px;
        font-size: 14px;
        font-family: 'Lato', sans-serif;
        color: #000;
    }

    hr.fancy-hr {
        width: 100%;
        border: 0;
        height: 1px;
        background: #c5c3c3;
        -webkit-box-shadow: 2px 0px 20px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    2px 0px 20px rgba(50, 50, 50, 0.75);
        box-shadow:         2px 0px 20px rgba(50, 50, 50, 0.75);
    }

Google Chrome浏览器和Google Chrome浏览器中的两个屏幕截图火狐：

http://i1217.photobucket.com/albums/dd399/MarianStroiu/googlechrome.png谷歌浏览器

http://i1217.photobucket.com/albums/dd399/MarianStroiu/ff.png Firefox

Answer 1

hr几乎没有支持，在浏览器中也没有得到很好的处理。根据我的经验，它并没有被大量使用。以下代码是您想要的常用做法，可根据您的需要进行自定义 -

div.line {
border-bottom:thin solid #fff;
}

<div class="container">

        <div class="main-content-container">
        <div class="article-container">
<div class="article-header">
<p class="article-count">0</p><p class="article-categories">1,2, 3, 4, 5</p>
<h1 class="article-title"><a href='#'>Lorem Ipsum is simply dummy</a></h1>
<p class="article-auth-date">2013 Apr 06</p>
</div> <!-- end of article-header -->

<img alt="bla bla bla" src="http:/localhost/uploads/test.png" style="border: none;">

<div class="article-post">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><!-- end of article-post-->
</div>

<!--<hr class="fancy-hr">--> do not use
<div class="line"></div>

</div><!-- end of article-container -->
</div><!-- end of main-content-container -->

Answer 2

这与前景色有关，凯文·林奇（Kevin Lynch）的修复不适用于正文背景为浅灰色（＃d1d1d1）的页面。将HR颜色更改为白色确实可以，并且现在显示为已蚀刻。

hr {color: #ffffff;}

实际上，HR仅需要是比背景浅的任何阴影，因此白色将始终有效。

Answer 3

我确信这对你来说并不理想，但不必担心所有造型，为什么不把它变成IMAGE而不是HR？它将更容易维护，并且可以简单地作为宽图像包含并简化所有CSS。

否则，您是否尝试过降低HR的宽度？这听起来很愚蠢，但我遇到过宽度使HR元素从其div中弹出的情况。

HR在Firefox中显示不同

3 个答案: