gpt4 book ai didi

html - 在 IE7 中正确输出

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

问题是:使用“绝对位置”的 CSS“边距自动”规则在 IE7 中不起作用。 IE7问题,其他浏览器都正常。我有一个带有“相对位置”的父元素,它包含一个带有“绝对位置”的子元素。我需要将元素与相对于父级左右两侧的“绝对位置”对齐。

    .header {
width: 100%;
min-width: 1000px;
position: relative;
height: 341px;
}

.block-up {
width: 100%;
min-width: 1000px;
background: #da251c;
height: 341px;
}

.block-down {
width: 100%;
min-width: 1000px;
background: #585453;
overflow: hidden;
height: 341px;
}

/*problem areas*/

.header-content {
background: #ffffff;
position: absolute;
width: 493px;
top: 150px;
left: 10px;
right: 0;
bottom: 0;
margin: auto;
height: 341px;
}
/*problem areas*/

.header-content-box {
position: relative;
width: 162px;
float: left;
border: 1px solid red;
height: 341px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<div class="header">
<div class="block-up">
</div>
<div class="block-down">
</div>
<div class="header-content">

<div class="header-content-box">
......
</div>

<div class="header-content-box">
......
</div>

<div class="header-content-box">
......
</div>
</div>
</div>

最佳答案

我能想到的唯一可能的解决方案是..

.header-content {
background: #ffffff;
position: absolute;
display:block;
width: 493px;
top: 150px;
left: 50%;
margin-left:-247px;
right: 0;
bottom: 0;
height: 341px;
}

这将向左移动 50% 和 margin-left -50% 的宽度..它痛苦而丑陋..但 IE7 也是..

JSFiddle

 .header {
width: 100%;
min-width: 1000px;
position: relative;
height: 341px;
}

.block-up {
width: 100%;
min-width: 1000px;
background: #da251c;
height: 341px;
}

.block-down {
width: 100%;
min-width: 1000px;
background: #585453;
overflow: hidden;
height: 341px;
}

/*problem areas*/

.header-content {
background: #ffffff;
position: absolute;
display:block;
width: 493px;
top: 150px;
left: 50%;
margin-left:-247px;
right: 0;
bottom: 0;
/*margin:0 auto;*/
height: 341px;
}
/*problem areas*/

.header-content-box {
position: relative;
width: 162px;
float: left;
border: 1px solid red;
height: 341px;

}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
<div class="header">
<div class="block-up">
</div>
<div class="block-down">
</div>
<div class="header-content">

<div class="header-content-box">
......
</div>

<div class="header-content-box">
......
</div>

<div class="header-content-box">
......
</div>
</div>
</div>
</body>

关于html - 在 IE7 中正确输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28340143/

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