图像“显示：阻止”的缺点？答案

【问题标题】：Downside of "display: block" for images?图像“显示：阻止”的缺点？
【发布时间】：2012-10-20 04:21:06
【问题描述】：

使用display: block CSS 属性将img 从内联块元素转换为块对象有什么缺点吗？

大多数时候，我希望它们是block 元素。我失去了任何有用的inline 方面吗？（也许我认为some 没有用？）

所有图片都应该默认转换成block元素吗？为什么它们根据规范是内联块元素？

附注我问这个问题是考虑通过定位和浮动以及周围元素进行布局。

【问题讨论】：

@Rocket，已经有了——你指的是什么吗？ @Ates，我想主要是我要问的是——为什么它们被规范视为内联块元素？例如，这可能会引发一些问题：stackoverflow.com/questions/13111136/…
在 css 中，'block' 是指拿住线并休息一下

【解决方案1】：

考虑到一个块会在换行之后强制任何东西，只有一种情况是不好的：

如果您打算在其旁边添加另一个内联元素（文本、另一个图像、跨度等）

【讨论】：

感谢参与。这是有道理的。据我所知，大多数网站主要使用图像作为块元素。我想我可能会开始将img { display: block; } 添加到我所有的样式表中。通常，如果图像引起问题，我会在图像到图像的基础上进行，但我认为这种解决方案更好。 除非在布局或浏览器不一致方面存在任何潜在的“错误”？
我希望我能回答这个问题，它曾经是一个问题。我不完全记得这个问题，但我认为这是程序员必须添加的浏览器（IE6）之间渲染图像的不一致display: block
是的，我也记得类似的事情......但不确定，因此我问。但这似乎很好:)

【解决方案2】：

有一个缺点：如果您计划将“text-align:center”应用于父元素的图像水平居中，则不能将图像显示为块或内联块。

【讨论】：

【解决方案3】：

将img { display: block; } 放入您的 CSS 中，然后忘记它。在极少数情况下，您需要不同的东西写一个异常。

【讨论】：

【解决方案4】：

发现一个用于块显示的 hack：“块”。

我有这张图片和我想要的 wavesurfer 音频波作为内联。但是，显示：“块”；在wavesurfer的js中是不允许的。

我所做的是，将这个 cdn 文件保存在本地，并将 显示更改为内联 并将 位置更改为绝对，这解决了我的问题。应该在创建 wave 元素的位置进行更改。

希望这对某人有所帮助。感谢 wavesurfer 创作者提供了如此出色的 js。

【讨论】：