当前位置：文江博客话题详情

网站上的 HTML 跨浏览器问题

发布于 2024-10-14 15:06:08 字数 475 浏览 5 评论 0原文

通常我可以自己修复 HTML 错误，因为它并不那么复杂，但这一次，我遇到了困难。

我决定更改网站上的导航，其中大部分都运行良好且易于使用。大多数浏览器都能正确显示它。

我的问题是，我有 5-6 像素的边距，但我找不到它的来源。链接&显示我的问题的图片如下。

我的第二个问题是 IE7 显示出巨大的余量，而且我也无法找出它的来源。

网页网址为：Deaglegame.net &下面是图片：

我要去工作几个小时，所以如果我没有回复，并不是因为我不想回复，我会尽快检查此线程，但非常感谢任何帮助！

感谢任何愿意提供帮助的人！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏有森光若流苏 2024-10-21 15:06:08

IE7 问题是由于兼容性视图造成的。如果您通过 Intranet 地址访问该页面，则默认情况下会强制执行此操作。您可以通过删除主 div 的底部填充并将高度设置为 175px 来解决此问题。这似乎也解决了运行兼容性视图时的边距问题。

您的菜单项列表以某种方式导致兼容性视图之外的边距问题，我建议在运行 IE 时按 F12，这应该打开开发人员工具，这就是我发现这些需要调整的设置的方式。

回复收藏 0 原文

诺曦 2024-10-21 15:06:08

@Mmerrell 对 div#main 的修复应该可以解决问题的一半。接下来是 @Bumble Bee 对 ul#navigation li a span 样式的观察。 SPAN 元素的填充导致您的链接推送内容。

/* deaglegame.css (line 48) */ 
#navigate li:hover a span, 
#navigate li.hover a span, 
#navigate li.active a span {
    /* removed  padding: 12px 0 0; */
}

/* deaglegame.css (line 30) */ 
#navigate li a span {
    cursor: pointer;
    float: left;
    height: 38px;
    line-height: 2.5;
    /* removed padding: 12px 0 0; */
    position: relative;
}

将填充放在它们上并设置 line-height 属性。一般来说，最好使用 line-height 来代替 padding 来进行文本的垂直定位（它适用于块元素和内联元素的内容）。

@Mmerrell's fix for div#main should sort one half of the issue. Next comes @Bumble Bee's observation for your ul#navigation li a span styles. The padding of the SPAN elements is causing your links to push the content.

/* deaglegame.css (line 48) */ 
#navigate li:hover a span, 
#navigate li.hover a span, 
#navigate li.active a span {
    /* removed  padding: 12px 0 0; */
}

/* deaglegame.css (line 30) */ 
#navigate li a span {
    cursor: pointer;
    float: left;
    height: 38px;
    line-height: 2.5;
    /* removed padding: 12px 0 0; */
    position: relative;
}

Drop the padding on them and set the line-height property. In general, it's better to use line-height for the vertical positioning of text (it applies to content of both block and inline elements) in place of padding.

回复收藏 0 原文