gpt4 book ai didi

html - float 导致图像超出对齐范围

转载 作者:太空宇宙 更新时间:2023-11-04 15:55:18 24 4
gpt4 key购买 nike

我在我的 mac 上创建了一个网页。我用 Chrome、FF 和 Safari 等常见浏览器对其进行了测试。这十分完美。我刚刚有机会在 IE 中测试该网站。看起来很糟糕——标志太靠右了。我相信这是造成这种情况的花车。我在这里发布一些代码,希望能得到这里专家的帮助。请帮助我。谢谢!

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

*{
margin:0px; padding:0px;
font-family: Tahoma, sans-serif;
font-size: 11px;
}


root {
display: block;
}

html, body, form, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}

body {
margin: 0 auto;
text-align: center;
width:780px;
}

#top_bkg {
padding:0;
margin:0 auto;
background-color:#009933;
width:780px;
height:101px;
}

#top_bkg2 {
background-color:#009933;
width:780px;
height:99px;
}


#logo {
float:left;
line-height: 1%;
margin-top:-132px;
background-color:red;
width:569px;
height:109px;
background-repeat:no-repeat;
background-position:bottom right;
}

</style>



</head>
<body>

<div id="top_bkg">
</div> <!--end of top_bkg-->

<div id="top_bkg2">
</div> <!--end of top_bkg2-->


<div id="logo">
</div> <!--end of logo-->


</body>
</html>

这是它在 IE 中的样子:

The red background is supposed to be the logo. Its out of alignment.

最佳答案

您可以创建一个像

这样的包装器,而不是将宽度设置为主体

<div id="wrapper"></div>并为包装器设置宽度,并且以负值给出边距也是不好的做法,而且您还为每个 div 设置了宽度和高度,这就是为什么它在 IE 中看起来像这样。请进行更正,然后在 IE 中看起来不错,尽管您可能需要对 IE 的边距和填充进行一些更正。

关于html - float 导致图像超出对齐范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10578613/

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