溢出隐藏在不同浏览器中显示不正确

我有一个div，其中我显示了一些文本，并且div具有固定的高度和宽度以及隐藏的溢出。但它在Firefox，Chrome和Safari中显示不同的文字。在铬和safari一个额外的文本行是可见的。如果我删除：溢出隐藏在不同浏览器中显示不正确

-moz-column-count:2; 
-webkit-column-count:2;

属性然后其工作正常。但是，如果添加此属性，它会在Firefox和Chrome中显示不同的文本。

我附加了Chrome和Firefox的快照。

<div style=" width: 710px; height: 70px;position:absolute;overflow:hidden;top=0;left=0;-moz-column-count:2;-webkit-column-count:2;z-index:102;"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <p> Vivamus mattis laoreet velit quis malesuada. Quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. Quisque dictum lacus at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p> 

    </div>

Chrome的观点 enter image description here

火狐狸浏览 enter image description here

来源

2013-05-08 ap.singh

如果你规范化CSS，它们看起来和我一样。顺便说一句，你为什么要在你的例子中定义两次z-索引？ – j08691 2013-05-08 13:33:42

我很困惑，为什么你需要-moz-column-count：1代码，如果它工作的很好，没有它，并且你使用它来指定默认的单列布局。 – 2013-05-08 13:33:45

其实很好。你的div的宽度是710像素：文字也是如此。 Chrome认为没有什么可以隐藏的，因为没有任何浮动外部的div – DiederikEEn 2013-05-08 13:35:42

您应该削减从DIV你的高度或宽度的标签。进一步的P元素需要一些样式来将它们显示为列。

<style type="text/css"> 
div { 
    width: 710px; 
    position:absolute; 
    overflow:hidden; 
    top=0; 
    left=0; 
    -moz-column-count:2; 
    -webkit-column-count:2; 
    z-index:102; 
} 
p { 
    overflow: hidden; 
    float:left; 
} 
</style> 
<div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Vivamus mattis laoreet velit quis malesuada. Quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. Quisque dictum lacus at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p> 

</div>

来源

2013-05-09 07:20:16 fatih

但我必须指定div的高度 – 2013-05-29 13:16:29

溢出隐藏在不同浏览器中显示不正确

回答

相关问题