解决HTML&&CSS浏览器留白现象

Posted 2023-04-14

参考技术A 原因：包含图片标签img的div是属于块级元素，而img是属于行内块。故而，浏览器会出现留白的现象。
解决的方法有二。

方法一：给div加一个固定的高，使其与图片的高相等。
方法二：将img转换为块级，即：

这样，就可以解决浏览器留白的问题啦~

是否有针对具有 CSS-Position 和可点击区域的 Android 浏览器错误的解决方法？

【中文标题】是否有针对具有 CSS-Position 和可点击区域的 Android 浏览器错误的解决方法？

【英文标题】：Is there a workaround for the Android browser bug with CSS-Position and clickable areas?

【发布时间】：2012-02-12 03:31:39

【问题描述】：

如果您有一些可点击的内容，如<a>、<input> 或<area>，并且在此之前您有一个具有更大 z-index 的绝对定位元素，则存在“点击”的错误行为。 我点击可点击元素位于前面元素后面的区域。在其他浏览器中，正确的行为是点击不通过前面的元素。但只有在 Android 浏览器中，您才能单击前面的元素并激活后面的元素。这是一个已知的错误，您无法避免。它甚至在较新的版本中（我在官方 Android 模拟器中测试 2.3.3）。

在一些论坛中描述了一些解决方法，但没有一个对我有用。

我尝试在前后之间放置<iframe> 或<a> 我尝试更改 DOM，所以浏览器状态可能已刷新 我也尝试过定位后面的元素 没有工作

我尤其在图像地图的区域元素方面遇到问题。

有没有人遇到过同样的问题并设法解决了这个问题？ 我对针对图像映射进行测试的解决方案特别感兴趣。

【问题讨论】：

如果已知该错误仅发生在安卓浏览器中并且您对所有其他情况都有解决方案，您能否在不可点击元素中设置点击侦听器，阅读用户代理并做出正确反应?也许这没有意义，但用户代理的东西可能很有用

@Maragues 很有趣的想法，但它不会起作用，因为后面的元素包含点击事件不会知道前面的哪个元素应该首先被点击。

如果后面的元素总是放在同一个区域，也许你可以读取点击坐标，并通过考虑屏幕大小和密度的一些计算，推断点击是否是针对前面元素的。我知道这是一个糟糕的解决方案，但它可能是一个绝望的举动。

我的赏金呢？我应该花掉它，但它已经消失了:(

骑士身份应该意味着灯箱。我的手机中的血腥文本替换

【参考方案1】：

我想知道这里的一些事情。首先，叠加图像和使用图像映射的目的是什么？我看到您包含 jQuery - 您可以使用 jQuery 的悬停事件来更改图像的方向并进行交换吗？附加到图像映射的点击事件，并检查灯箱是否打开。如果是，那么return false;。

只是想大声思考。有时，另一种看法可能会有所帮助。

【讨论】：

我有一张图片地图。单击它会触发灯箱。灯箱在图片贴图之前，但点击通过图片贴图上的灯箱。这是错误的，错误的行为。还有另一个问题。我使用 jQuery 进行悬停。悬停工作正常。是安卓不行。

你得到了赏金，因为你是唯一关心的人:(

是否有可能在图像映射点击的处理程序中使用return false;，或者我错过了什么？

问题是，背后的可点击元素完全获得焦点。我在灯箱中有一个表单，您无法点击表单的元素，因为点击会渗入后面的元素。

【参考方案2】：

这是一个蒙住眼睛的快速回复，如果我应该进一步扩展/修复它，请告诉我。总体思路是一个 CSS 类，用于禁用指针交互的悬停和焦点事件。

yourElementClass:focus, yourElementClass:hover 
    pointer-events: none;

【讨论】：

哪个元素应该有这个规则？后面的那个是可点击的，但不应该是，还是前面的那个是不可点击的，但应该是？

这可能有效。我现在没有时间对此进行进一步测试，但在 Chrome 的 Element Inscpector 中我意识到，pointer-events 必须转换为具有图像映射才能工作的<img> 元素。虽然无法在 android 中尝试

我在想你会把它应用到后面的 input 元素上应该是不可点击的，但也许我误解了你的问题。让我知道它是否以某种方式起作用。

是后面的imagemap区域，不能点击

所以它是一个不应该与之交互的 abs 定位元素后面的图像映射。我是否认为这没有帮助？

【参考方案3】：

实际上，我已经设法通过移动下面的对象让它们不可见来避免它。 但是在与您类似的情况下，唯一真正有效的解决方法是管理 jquery 中的所有点击（尤其是后台的点击）并根据需要绑定/取消绑定点击事件。 还有一些东西可以在某些版本/手机上有所帮助（但不能解决问题）

以上项目有背景：rgba(0,0,0,0.1); 您应该将 gif 或 png 作为上述元素的背景（以及作为第 1 点的背景颜色） 使用 thouchstart 代替 click 作为绑定事件有时会有所帮助。

android/browser 的实际版本不受此错误的影响（或者至少它从未发生在我身上）但很高兴知道受影响的版本。如果有人有清单。