：在僞元素工作在FF後，但沒有Safari或Chrome

我想添加一個：在僞類後的.readmore類在Joomla。：在僞元素工作在FF後，但沒有Safari或Chrome

.readmore 
{ 
    font-size:12px; 
    margin-bottom:2px; 
    color:#000 !important; 
    font-weight:bold; 
    display:inline; 
} 

.readmore:after 
{ 
    content:""; 
    display:block; 
    width: 215px; 
    height: 3px; 
    border-bottom: 1px solid #CCC; 
    margin:3px 0 3px 0; 
}

在Firefox中，它完美的工作;文章介紹之後，有一個「...更多」鏈接，後面是一行，然後是下一個介紹。 Safari和Chrome似乎完全忽略了：after元素。

編輯：我已經發現它與.readmore的display:有關。如果我同時使用.readmore和它的:after僞設置爲:block，但是.readmore在它自己的行上（很明顯），我確實喜歡它是內聯的。如果我將它設置爲:inline或:inline-block，它將在Safari/Chrome中停止工作（但FF似乎並不在意......它會呈現:after假 - 無論如何 - 作爲跨越列的水平線）。關於FF/Safari/Chrome如何渲染塊元素的任何提示/建議或資源？

如果這讓我感到困惑，我會截取一些截圖並在稍後發佈。

來源

2011-10-25 Dennis

在你的內容聲明中沒有'... more'，但它適用於我的Chrome - http://jsfiddle.net/ncYmC/ – mrtsherman

哦，'... more'在其他地方聲明，在語言文件。：after元素只應該是行（代表

，我想）。 – Dennis

如果我理解正確的話，你想達到如下效果：

有一些文字，再有就是iniline«更多...»文本在它的結束，然後在新的生產線有一個使灰色條紋的塊級元素。

示例代碼，而不：後：

This is the example text that we want to show <div>more...</div> 
<div class="line"></div>

可能導致這樣的：

This is the example text that 
we want to show more... 
-----------------------------

如果我是正確的，那麼它可能是Firefox的錯誤，而不是在Chrome/Safari瀏覽器。

：之前和之後：僞類沒有添加元素後，他們申請的標籤，他們添加之前和之後的內容。

所以上面的例子將呈現爲：

This is the example text that we want to show <div>more...<div class="line"></div></div>

，從這裏是所有的問題：您不能插入內聯元素中塊級元素，或瀏覽器將不知道如何渲染它。

如果這是一個正常的標籤，那麼瀏覽器會嘗試修復它。例如，如果您插入DIV標籤內p標籤是這樣的：

<p>1<div>2</div>3</p>

，然後嘗試一下使用Firebug的DOM，你會看到瀏覽器關閉，錯過了（它認爲）標籤和渲染代碼如：

<p>1</p> 
<div>2</div> 
<p>3</p>

火狐可能會做同樣的事情：元素之後 - 關閉DIV，然後在同一水平上增加了新的元素。但Safari和Chrome試圖在原始類中渲染它並失敗。

所以，如果你想讓它工作，你最好附加：在文本片段的父類之後，而不是«更多...»元素。像這樣：

<div class="parent"> 
    This is the example text that we want to show <div>more...</div> 
</div> 

.parent:after { your_code_here }

來源

2011-10-26 19:34:51

這不會更好地實現爲模板重寫嗎？

複製/component/com_contentviews//category/blog_item.php文件（完全從內存 - 這樣可能有點錯了，但委託人持有）到/templates/yourtemplate/com_content/category/blog_item.php，然後編輯php/html來做你需要的。

來源

2011-10-30 13:56:10

：在僞元素工作在FF後，但沒有Safari或Chrome

回答

相關問題