为什么我不能在Wordpress中正确设置blockquote的样式？

Question

在我刚刚为我的网站创建的设计中，我使用css中的span技术使用两个引用图像设置了blockquote：

blockquote {
background-image: url(images/openquote.jpg);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
padding-right: 30px;
font-style: italic;
}

blockquote span {
background-image: url(images/closequote.jpg);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
font-style: italic;
}

然后我像这样格式化HTML：

<blockquote><span>
"The worst part of writing fiction is the fear of wasting your life behind a keyboard. The idea that, dying, you'll realize that you only ever lived on paper. Your only adventures were make-believe, and while the world fought and kissed, you sat in some dark room, masturbating and making money."<br /><br /><b><div align="right">- Chuck Palahniuk</div></b>
</span></blockquote>

在我创建的测试HTML页面上，引用工作正常，并准确显示我想要的方式。现在我将所有编码都转移到Wordpress，但是blockquote并没有以同样的方式显示。

HTML： lifesgarbage.com/rebnation.html（抱歉，我无法发布多个链接）

Wordpress： http://test.lifesgarbage.com

如何更改我的CSS，使其在Wordpress上显示的方式与常规HTML上的方式相似？

Answer 1

我认为答案是wordpress将blockquote标签的默认MARGIN定义为0.您应该在css中添加一个显式的边距值。

Answer 2

另外，wordpress正在插入＆lt; p>在＆lt;之后标记blockquote＆gt;。也许尝试使用＆lt; p class =“blockquote”＆gt;和样式为.blockquote {margin：x;填充：X;}

左边距似乎不是blockquote样式的一部分，因此＆lt; p>可能正在重置某些东西。

Answer 3

问题在于WP将内容包装在自动生成的<p>标记内，因此您应该修改CSS以将其考虑在内。

Answer 4

您可以使用以下内容明确定位块引用：

.entry-content blockquote > p { }

这应该适用于常规的Wordpress安装。

Answer 5

使用Wordpress，您可以在内容中添加一个过滤器，以完全按照您希望获得的优质块报价

我有一篇关于此的博文可以回答这个问题。

blockquote tutorial