CSS 排列图像。始终相差 1px。为啥/如何？

Posted 2023-03-06

【中文标题】CSS 排列图像。始终相差 1px。为啥/如何？

【英文标题】：CSS Lining up images. Always 1px difference. Why/How?CSS 排列图像。始终相差 1px。为什么/如何？

【发布时间】：2011-04-10 13:05:00

【问题描述】：

我已经在我的网站中实现了一个 Facebook Like 按钮。

我想制作与like 按钮风格相同的其他按钮。我使它们与点赞按钮的高度相同，但无论我的按钮会出现在点赞按钮上方或下方一个像素 - 这确实很明显而且看起来很糟糕。

现在我对 CSS 比较陌生，我不知道什么是最佳实践。

我使用 Firebug 进行了追溯，发现 FBML（不管它如何工作）正在生成一个包含类似按钮的跨度。我认为这与问题有关。

我的解决方法如下

<div style="display: inline; position: relative; top: 1px;">
    <img src="images/button.png">
</div>

<fb:like layout="button_count" show_faces="false"></fb:like> 

如果有人能解释为什么 FB 喜欢按钮显示此行为，以及我如何修复它是最佳解决方案，我将非常感激（据我所知）？

除了一般...我最终让我的页面完全按照我想要的方式显示。 为此，我使用了 25 个<div>s。这似乎很多 - 尽管我的页面有些复杂。这样可以吗？

非常感谢！

编辑 我的 div 用于定位元素。例如，我希望一些内容出现在左侧，一些出现在右侧，所以我有两个 50% 宽度的 div 并排。

然后我想让一个按钮居中显示，所以我有一个带有 text-align:center; 的 div我已经这样做了，因为我被告知这比

在这之后，我又想要左右两边的东西，所以我有与第一个点相同的类再次输出两次。这是填充的，我想要内容周围的边框。因此，我有另一个 div 里面有边框：1px 纯黑色；

这是正确/可接受的用法吗？ 谢谢

【问题讨论】：

你自己的问题解决了吗？

你能给你网站的链接吗？也可以使用大量 div，只要您需要（转到 gmail.com 并打开 firebug！），但我需要再次查看您的代码以了解 25 是否合理！

以典型的无用方式，我无法链接..因为该站点位于我的本地主机上。 Gmail - 很公平。我相信我的 div 用法没问题。定位页面周围的东西 - 我添加了我的 div 使用的更多细节。到目前为止，对齐问题已通过使用 position relatve top 1px 解决了。但我想了解为什么需要这样做:)

您知道jsbin 和jsfiddle？在那里发布您的演示（足以重现您的问题）并记住将图像 src 指向互联网上的实时图像（bayimg.com 适合热链接和免费托管）。

【参考方案1】：

您是否检查过图像不包含任何空白以混淆间距问题？

【参考方案2】：

听起来有两件事可能会发生，

首先是最明显的，与 css 中的相对定位有关，请查看 here 了解更多信息。

第二个是它可能会呈现默认边框，因此请将其添加到您的样式中，看看会发生什么：

*

   border:none;

【参考方案3】：

尝试使用 CSS 重置。

听起来可能是边距问题、填充问题或边框问题。

试试：

*  margin:0; padding:0; border:0; outline:0; 

【参考方案4】：

我会选择 Craig 对 reset CSS style-sheet 的回答，或者如果您正在构建一个完整的网站，也许您可​​以尝试使用 CSS 框架之类的东西，例如 960.gs 或 Blueprint，其中已经包含了 reset css行为。

这些是占用空间相对较小的优秀解决方案，可确保您的网站展示 99.99% 跨浏览器兼容。

另一方面，获取一些信息会有所帮助，例如原始图像的宽度和高度、图像的宽度和高度、显示图像的 html 标记以及 CSS 样式。

如果有任何错误，请原谅英语。

【参考方案5】：

不确定这对你来说是否仍然是个问题，但我最近遇到了一个图像问题，出于某种原因，无论我删除了多少其他样式，我都在图像底部获得了额外的 2 像素空间我的页面，但我能够很容易地修复它：

   .divname img  display:block; 

这可能适合你，也可能不适合你。

【参考方案6】：

Thomas，在 Firefox 中尝试突出显示“Like”按钮，右键单击并选择查看选定的源。我查看了三个站点以检查一致性，所有三个站点都显示“Like”文本包含在 table、div、span 和 anchor 中； all 都可以根据样式的完成方式改变间距。

如果你在 FF 中安装了 firebug，你可以玩转 CSS，看看如何让你的对齐更容易一些。请记住边框、内边距、边距、行高、单元格间距/内边距等。

【参考方案7】：

尝试将按钮代码包装在 <div class="whatever"> 中并使用以下 CSS：

div.whatever 
   diaplay: inline;
   margin-top: -1;

负边距通常适用于微移元素。