问题标签 [image-replacement]

也许我今天有点厚，但我需要一些 CSS 帮助。我正在制作一个看似简单的产品评论展示。这是一个 div (.rating)，其中有两个元素：

1. <strong class="score fourStars">Rated 4 out of 5 stars</strong>
2. <span class="reviewsCount">average from 34 reviews</span>

HTML片段：

CSS

问题

我已经很好地从精灵中得到了这个东西。现在的问题是如何让它集中对齐？！我一直在寻找 inline-block 来拯救我，但显然它必须在 IE7 上工作。该死的。

基本视觉示例

也许我错过了一些明显的东西。也许有人可以指出我的光的方向。设置 text-align: center 似乎只对齐评论部分的数量，而不是图像替换的评论星。

帮助...

我正在通过 initializr.com 使用响应版本的 html5 样板。我的网站使用自定义徽标，因此我将 .ir 类添加到 h1

像这样

文件说_

将 .ir 类添加到您应用图像替换的任何元素。用图像替换元素的内容时，请确保还设置特定的背景图像：url(pathtoimage.png);、宽度和高度，以便显示替换图像。

所以我在代码中添加了这些行

问题是特定的宽度和高度。我无法摆脱它们，但徽标不会以这种方式响应。想法？这是小提琴。http://jsfiddle.net/qeW3e/

我已经设法让我的标题作为 ff、safari 和 opera 中的链接以及 css 图像替换

我正在尝试在 IE 中优化该网站，这是我在周一启动它之前的最后一步，但徽标根本没有出现在 IE 8 或 9 中，但它在 IE 7 中却非常令人惊讶。我设法得到了通过使 display inline-block 出现在 IE9 中的徽标

当我这样做时，图像不再是链接，有人知道如何解决这个问题吗？我会将图像放在 HTML 中，而不是使用图像替换，但是从 SEO 的角度来看，使用图像替换更好。

看起来很简单，但我无法让它工作。

div 包含 facebook / twitter 链接。它应该工作的方式是显示图像，然后当有人将鼠标悬停在其上时，它会消失并被社交图标取代。

我有代码可以处理 div 中的文本，但是一旦我添加图像/脚本，它似乎就坏了。（我得到的代码也没有图像消失，这是我还没弄清楚该怎么做的事情）。

这是我所拥有的：

使用以下CSS：

这是在 jsfiddle 上：http: //jsfiddle.net/randomlysid/dxwma/1/

如果可能的话，我想用 css 来做这件事，因为那是我所熟悉的，但如果 jQuery 是完成它的唯一方法，那也可以。

谢谢！

我正在尝试实现图像大小调整技术，它们都工作得很好——也就是说，直到你弹出一个：

示例：http: //jsfiddle.net/mAGhh/

以前有没有人处理过这个问题？我当然可以包装所有元素并使用图像替换，但我很确定我会遇到内联问题......

我正在使用 HTML5 Boilerplate css，我想将该ir类应用于我的页脚菜单。菜单在一个列表中，我使用 inline-block 水平显示这个列表。

这是代码的小提琴。您可以看到图像替换有效，但后面的文本菜单元素（没有图像）被翻译到底部。这是由于.ir:beforecss 规则模拟了占用一些空间的块元素。

有没有办法在没有这种副作用的情况下使用 HTML5 Boilerplate 技术？如果没有，我将回到text-indent:-9999px技术上。

额外的问题：与文本缩进相比，HTML5 样板技术有什么好处？

我遇到了一个微妙但令人讨厌的问题：我正在尝试使用 CSS 图像替换来实现“关闭”交叉。HTML是

这里的图像是一个 30 像素 x 30 像素的透明正方形。CSS是

这两个图像是透明的 30px x 30px 正方形，其中有一个蓝色和红色的“关闭”十字。结果效果不是很好，因为:hover似乎只对我徘徊而不是在div. 请在此处查看演示。

我在这里做错了什么？

我在Kellum方法中发现了一个奇怪的错误：

基本上在 webkit 中，如果您按 CTRL+F 并搜索Hello文本会返回到视图中（按几次输入以循环浏览它），这在使用它进行图像替换等时会出现问题。如果可能的话，如何解决这个问题，同时保留使用“Kellum”方法？

http://jsfiddle.net/4d5H6/

- 分页符 -

图像元素

在这种情况下发生的情况是，用于审核的所有图像都在页面上呈现在彼此下方。我希望图像水平渲染并在达到文档宽度时继续下一行。

编辑

当我把所有东西都写[audit_sub1; block=begin;]在[audit_sub1; block=end;]一行上时。我得到以下结果：

• 图 1 位于左上角（正确）
• 图像 2 位于图像 1 旁边（正确）
• 图像 3 在图像 1 上渲染（不正确，我希望它在新行上渲染，因为已达到宽度）

嗨，我正在使用以下代码使用 CSS 替换我网站上的图像：

此代码适用于 safari 和 chrome。我只是想知道有没有人知道我可以用来在 Firefox 中做同样工作的任何代码？