gpt4 book ai didi

html - IE7 中等效的 CSS 是什么?

转载 作者:太空宇宙 更新时间:2023-11-04 13:20:11 25 4
gpt4 key购买 nike

我有一些 HTML 和 CSS,它们都适用于 IE8 及更高版本。但是,在 IE7 中,这不起作用。它不是让 wrapper 居中,而是位于左侧。这个 CSS 是这个问题的最小数量,但是我有以下一些要求:

  • 一个绝对定位的包装器
  • 灵活的宽度(此处设置为 90%,以及最大和最小宽度)
  • 顶部 39 像素(用于横幅)

假设,我可以对 IE7 进行以下程度的破解:

*left: 50%;
*margin-left: -45%;

但是,我不想...无论如何,这是标记:

<!DOCTYPE html>
<html lang='en'>

<head>
<style type="text/css">

#banner-wrapper {
position: absolute;

top: 0;
left: 0;
right: 0;

height: 39px;
width: 100%;
min-width: 752px;

background-color: rgb(95,95,95);
z-index: 1;
}

#wrapper-main {
position: absolute;

top: 39px;
left: 0;
right: 0;
bottom: 0;

width: 90%;
max-width: 1200px;
min-width: 750px;
min-height: 620px;

background-color: lightblue;

margin: 0 auto;
overflow: hidden;
z-index: 0;
}

#wrapper-left {
position: absolute;

top: 0;
bottom: 0;
left: 0;

width: 180px;

background-color: green;
}

#wrapper-content-container {
position: relative;
padding-left: 181px;
height: 100%;

top: 0;
right: 0;
left: 0;

overflow-y: scroll;
z-index: 0;
}

#wrapper-content {
position: relative;

min-height: 900px;
width: 100%;
z-index: 0;
}
</style>

</head>

<body>
<div id="banner-wrapper"></div>
<div id="wrapper-main">

<div id="wrapper-left">THIS STAYS HERE</div>

<div id="wrapper-content-container">
<div id="wrapper-content">
<!-- Scrollable content goes here -->
THIS SCROLLS
</div>
</div>

</div>

</body>
</html>

有什么办法可以实现吗?相对定位的 wrapper 在完整形式时会严重影响设计,同样,固定宽度也是如此。我没有想法,但也许其他人知道可行的解决方案。

注意:我添加了更多的 HTML/CSS 来阐明一些整体设计。

感谢您的帮助。

最佳答案

虽然您提到不想使用 IE7 hack,但这是一种无需添加额外样式表即可创建仅 IE7 样式的有效方法,这将解决您的问题,添加以下代码

<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if !(IE 7)]><!--> <html> <!--<![endif]-->

代替您常用的 html 标签。

然后您可以使用:

.ie7 .css-selector {

仅针对 ie7 中的任何元素。

为了全面披露,如果您使用条件注释,这适用于 ie 的所有版本,例如:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->  
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

关于html - IE7 中等效的 CSS 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18688518/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com