html - CSS Image size auto 使跟踪像素显示为丢失的图像

标签 html css image twitter-bootstrap

我正在为网站使用 Bootstrap。显然 bootstrap 默认所有图像的宽度和高度 = 100%。

该站点包含来自广告服务器的广告,其中包括用于跟踪印象的跟踪像素等。这些像素图像的内联大小为 0,但 css 样式覆盖了它。

问题在于有时 img 像素不是有效的图像文件,因此图像在框中显示有小“x”以表明图像丢失。由于无法知道此图像的“真实”大小,因此浏览器会显示一个小方框,可能是 15 或 20 像素的正方形。

我已经为一些像素添加了样式,这些样式通过名称来识别它们并将它们的大小设置回 0,但现在我有一个像素没有我可以引用的名称或 ID。

我需要做的是至少从广告所在的容器中“删除”默认的“自动”图像大小。我不想从 Bootstrap css 文件中删除它,因为它随时都会中断我升级(以及可能破坏其他 Bootstrap 功能)。

有什么想法吗?

最佳答案

如果您有“丰富”的 HTML 横幅,您应该始终将它们加载到 iframe 中。这不仅使它们对您的问题所说明的主页 CSS 不敏感,而且反过来确保它们不会破坏您自己的布局,它还可以防止许多可能的 XSS 攻击。不要相信应用程序中的第三方代码,无论是为了维护布局还是为了安全。

iframe 方法的另一个优点是,横幅使用的外部资源(例如图像)通常可能从中央 CDN 缓慢加载,并且被 iframe 延迟到包含页面加载后最后加载 - 因此广告永远不会减慢您的用户体验。

除了框架之外,确实没有其他方法可以可靠地为少数容器元素取消“某些”CSS - 这不是 CSS 应该做的,它的全部目的是对整个文档是全局的。

关于html - CSS Image size auto 使跟踪像素显示为丢失的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18582716/

相关文章:

jquery - 如何修复 IE7 中的 HTML z-index 层排序?

jQuery .show() 向元素添加样式 ="display:inline-block"

CSS 位置在一切之上

css - 通过 CSS 将图像更改为文本以进行打印?

image - 如何在Safari浏览器中添加Webp支持

javascript - 在 Javascript 变量中存储图像?

javascript - 具有相同字体、大小和颜色的两个 div.textContent 在 Chrome 中呈现不同

javascript - 使用 Javascript 删除和更改 HTML 中 URL 的某些文本

python - "UserWarning: Possibly corrupt EXIF data"对图像进行分类时

css - IE9 在 IE7 文档模式下抛出我的页面并且 <!DOCTYPE html> 被注释掉