HR在Firefox中显示的不同 [英] HR displayed different in Firefox

问题描述

正如标题解释，我有一个小问题，显示一个< hr> 行

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

尝试做的2是，通过添加该行分开一些新闻文章，但在Firefox中，该行是在容器外，就像有位置：绝对; 和 padding：500px;

这是我的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简直是假的< / a>< / h1> 
< p class =article-auth-date> 2013年04月06日< / p> 
< / div> <！ - 文章标题的结尾 - > 
 
< img alt =bla bla blasrc =http：/localhost/uploads/test.pngstyle =border：none;> 
 
< div class =article-post> 
< p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是工业标准的虚拟文本，当时一台不知名的打印机拿起一个类型的厨房，把它炒到一个样板书上。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在二十世纪六十年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及。< /  - < / div><！ -  end of物品后 - > 
< / div> 
 
< hr class =fancy-hr> 
< / div><！ - 物品容器结束 - > 
< / div><！ -  main-content-container的结尾 - > 
 
< aside>< / aside><！ -  end of aside  - > 
 
< / div><！ - 容器结束 - > 
  

这就是CSS：

  .main-content-container {
 float：left; 
 margin：5px 0 0; 
 padding：0; 
 width：660px; 
 height：800px; 
背景颜色：白色; 
 
 -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; 
保证金：0; 
 padding：5px 0 0; 
宽度：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; 
颜色：＃000; 
} 
 
 hr.fancy-hr {
 width：100％; 
 border：0; 
 height：1px; 
背景：＃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浏览器的两个屏幕截图Firefox：

http ：//i1217.photobucket.com/albums/dd399/MarianStroiu/googlechrome.png Google Chrome

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

hr解决方案

---

支持很少，在浏览器中处理不好。我的经验并没有太多用处。下面的代码是你想要的常见做法，定制它你感觉如何 -

  div.line {
 border -bottom：薄实体#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简直是假的< / a>< / h1> 
< p class =article-auth-date> 2013年04月06日< / p> 
< / div> <！ - 文章标题的结尾 - > 
 
< img alt =bla bla blasrc =http：/localhost/uploads/test.pngstyle =border：none;> 
 
< div class =article-post> 
< p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是工业标准的虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，并把它制作成一个样板书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在二十世纪六十年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及。< /  - < / div><！ -  end of物品后 - > 
< / div> 
 
<！ - < hr class =fancy-hr>  - >不要使用
< div class =line>< / div> 
 
< / div><！ - 物品容器结束 - > 
< / div><！ -  main-content-container的结尾 - > 
  

As the title explains, I have a little problem displaying a <hr> line.

In IE 7, 8, 9, Google Chrome, Opera Safari, all the same, no problem just one doesn't support the CSS3 effects like shadows, etc.

What I'm trying 2 do is, separate some news article by adding that line, but in Firefox that line is out of the container, is like is having position: absolute; and padding: 500px;

Here is my html markup :

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

And this is the 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);
    }

And 2 screenshots from both Google Chrome & Firefox:

http://i1217.photobucket.com/albums/dd399/MarianStroiu/googlechrome.png Google Chrome

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

解决方案

hr has very little support and is not treated well in browsers. It is not used a lot in my experience. The code below is common practice for what you want, customize it how you feel -

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

这篇关于HR在Firefox中显示的不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！