在 Internet Explorer 7 中设置 div 高度时出现问题

发布于 2024-10-12 22:58:49 字数 596 浏览 4 评论 0原文

我有一个带有漂亮曲线背景图像的 div，因此它在所有浏览器上都有圆角。

问题在于，在 Internet Explorer 中，背景图像后面跟着一条背景色线。如果我设置 div 的高度，Firefox 和 Chrome 都会缩小 div 的高度，但 IE 不会调整任何内容。

这是我的 CSS。请注意，CSS 的其余部分适用于 IE（和 FF/Chrome）。

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
}

是否有一些关于我遗漏的高度的 IE“陷阱”？

以下是一些其他详细信息：

该行不会出现在 FF 或 Chrome 中。
页面上几乎没有 javascript，不会影响其呈现方式。
对 css 的其他更改将应用于 div。

原文

I have a div with a pretty curve background image so it does rounded corners on all browsers.

The problem is that in Internet explorer, the background image is followed by a background-coloured line. If I set the div's height, Firefox and Chrome will both shrink the height of the div, however IE will not adjust anything.

Here's my CSS. Note that the rest of the CSS is applied in IE (and FF/Chrome) fine.

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
}

Is there some IE 'gotcha' regarding height that I'm missing?

Here are some additional details:

The line does not appear in FF or Chrome.
There's little javascript on the page, nothing that would impact how this renders.
Other changes to the css get applied to the div.

分享到QQ

分享到微博

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

发布评论

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

单挑你×的.吻 2024-10-19 22:58:49

如果我理解正确的话，高度不会因为行高和字体大小而受到影响。所以你必须添加

line-height: 0;
font-size: 0;

if i could understand right, the height is not effected becasue of the line-height and font-size. so you must add

line-height: 0;
font-size: 0;

回复收藏 0 原文

锦爱 2024-10-19 22:58:49

记住设置文档类型，这样浏览器就不会进入怪异模式

html 文档的第一行应该是

<!DOCTYPE html>

您也可以使用更传统的 xhtml 文档类型，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但我会推荐第一种类型，它符合 html5 并在 IE 中正常工作即使他们不做 html5，它看起来也比那个糟糕的 xhtml doctype 好得多；）

还要记住，你不能将高度应用于 inline 元素，只能应用于块级元素，所以你的元素需要是 display: block 或 display: inline-block 或类似的；)

Remember to set the doctype so the browser doesn't go into quirksmode

First line of your html document should be

<!DOCTYPE html>

You could also use a more traditional xhtml doctype like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But i will recommend the first type which is html5 compliant and works fine in IE as well even tho they don't do html5, and it looks so much better than that awful xhtml doctype ;)

Also remember that you cannot apply height to inline elements, only block level elements, so your element needs to be display: block or display: inline-block or similar ;)

回复收藏 0 原文

靑春怀旧 2024-10-19 22:58:49

尝试将overflow:hidden应用到你的CSS中

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
    overflow:hidden; 
}

Try applying overflow:hidden to your CSS

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
    overflow:hidden; 
}

回复收藏 0 原文

~没有更多了~