为什么在 IE 中我的右边距与左边距重叠?

发布于 2025-01-02 08:56:16 字数 302 浏览 2 评论 0原文

在 FF 或 safari 中一切正常,但 IE 正在与我的边距产生重叠问题,我不知道如何修复 css 来解决它。我尝试过使用 css 重置文件,但它实际上使事情变得更糟。我可以改变我原来的 CSS 中的任何内容来解决这个问题吗?

网站页面

CSS 样式表

Everything works fine in FF, or safari, but IE is creating overlapping problems with my margins and I can't figure out how to fix the css to account for it. I've tried to use a css reset file and it actually makes things worse. Is there anything I can alter in my original CSS to fix the problem?

Website page

CSS Stylesheet

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

<逆流佳人身旁 2025-01-09 08:56:16

你需要在浏览器中进行检查,说明浏览器是否使用不同的 css 文件。如果您有很多事情需要更改,那么这很有效。您也可以将这些条件注释用于内联 css。

<!--[if !IE]-->
    <link type="text/css" rel="stylesheet" href="/css/StandardsCompliant.css" />
<!--[endif]-->
<!--[if IE]> 
    <link type="text/css" rel="stylesheet" href="/css/ie.css" /> 
<![endif]-->

查看此链接以获取更多信息
http://www.quirksmode.org/css/condcom.html

u will want to put a browser check in that says if the browser is ie use a different css file. This works if you have quite a few things you need to change. You can use these conditional comments for inline css as well.

<!--[if !IE]-->
    <link type="text/css" rel="stylesheet" href="/css/StandardsCompliant.css" />
<!--[endif]-->
<!--[if IE]> 
    <link type="text/css" rel="stylesheet" href="/css/ie.css" /> 
<![endif]-->

check out this link for more info
http://www.quirksmode.org/css/condcom.html

因为看清所以看轻 2025-01-09 08:56:16

从你的描述很难准确理解发生了什么。这可能是由于边距塌陷(请参阅http://complexspiral.com/publications/uncollapsing-margins/< /a> ),由于 IE 边距错误或其他原因。

对 IE 最简单的修复是使用条件注释为 IE 制作特定的样式表。
例如。

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

从某种意义上说,这也是一个干净的解决方案,性能影响仅出现在有问题的浏览器上,并且主样式表不会变得过于复杂。

阅读有关条件注释的更多信息 http://www.quirksmode.org/css/condcom.html

针对特定浏览器的另一种常见策略是使用 JS 来检测浏览器,将相关类附加到 html 或 DOM 中的 body 元素(例如名为 ie7、ie8、chrome11 等的类),然后使用那个在像这样的 css:

.button {width: 100px; padding: 10px;}
.ie7 .button {width: 120px; padding: 10px;}

这使得可以为浏览器版本编写简单的修复程序。

From your description it's difficult to understand exactly what happens. It might be due to margin collapse (see http://complexspiral.com/publications/uncollapsing-margins/ ), due to IE margin bugs or some other reason.

Easiest fix for IE is to make specific stylesheets for IE with conditional comments.
Eg.

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

This is a clean solution also in the sense that performance hit is only on the browser with the problems, and main stylesheet doesn't get excessively complex.

Read more about conditional comments from http://www.quirksmode.org/css/condcom.html

Another common strategy for targetting a specific browser is to use JS to detect the browser, attach a relevant class to html or body-elements in DOM (for ex. class called ie7, ie8, chrome11, ...) and then use that in the css like this:

.button {width: 100px; padding: 10px;}
.ie7 .button {width: 120px; padding: 10px;}

This enables writing simple fixes for browser versions.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文