img标签的CSS兼容性难题

1. 图片默认有间距

在默认情况下，浏览器会对img标签产生一定的间距，这在视觉上可能会影响布局的美观。这种间距在不同浏览器中表现不同。

2. 超链接访问过后样式混乱

当超链接被访问过后，其样式可能会出现混乱，例如hover样式消失。这主要是由于CSS属性的排序问题导致的。

3. 图片下方会有空隙

在某些浏览器中，img标签下方可能会出现空隙，这同样会影响布局的整洁性。

解决方案

1. 图片默认间距问题

img {
  vertical-align: middle;
  display: block;
}

2. 超链接访问过后样式混乱问题

为了避免超链接访问过后样式混乱，可以按照以下顺序设置CSS属性：L-V-H-A（link, visited, hover, active）。

a:link {
  /* 链接默认样式 */
}

a:visited {
  /* 访问过的链接样式 */
}

a:hover {
  /* 鼠标悬停时的样式 */
}

a:active {
  /* 鼠标点击时的样式 */
}

3. 图片下方空隙问题

img {
  vertical-align: bottom;
}

总结

img标签的CSS兼容性问题虽然存在，但通过合理的设置和调整，可以有效解决这些问题。在实际开发过程中，了解并掌握这些兼容性技巧，将有助于提高网页的兼容性和用户体验。