gpt4 book ai didi

不同浏览器的 HTML 和 CSS 对齐问题

转载 作者:行者123 更新时间:2023-11-28 09:35:45 25 4
gpt4 key购买 nike

我有一个带有 CSS 的 HTML 页面。该页面在 Chrome 中以正确的对齐方式加载,但如果我在 IE 11 或 Mozilla 中加载相同的页面,它会显示对齐问题。我想在所有浏览器中显示与 Chrome 中相同的对齐方式。如果 Chrome 遵循任何特定的分辨率,那么如何在 HTML 代码中设置相同的页面分辨率。

HTML 页面:

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

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="CSS/styles.css" media="screen"/>
<title>Welcome</title>
</head>

<body>
<div id="mainDiv">
<div id="logoDiv">
<div id="logo">
<img src="images/houseLogo.png" alt="House logo" />
</div>
<div id="headingDiv">
<h1>My sweet home</h1>
<h3>We will search for you</h3>
</div>
</div>
<div id="menuDiv">
<ul>
<li><a id="homeRound" href="index.html">Home</a></li>
<li><a id="selectedMenu" href="#">Register</a></li>
<li><a href="postHouse.html">Post property</a></li>
<li><a href="postRequirements.html">Post requirements</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</div>
<!--<div id="validationMessages">
<div id="validationHeading">
<p>Correct the following:</p>
</div>
<div id="errors">
<ul>
<li>Select country.</li>
<li>Select state.</li>
<li>Select city.</li>
<li>Enter area name.</li>
</ul>
</div>
</div>
<div id="validationmessageArrow">
<div id="arrowSymbol"></div>
</div>-->
<form id="registerForm" action="#">
<div id="registerTag">
<ul>
<li><label id="register">Register personal details:</label></li>
<li>
<label id="firstName">First name:</label>
<input type="text" name="firstName"/>
</li>
<li>
<label id="lastName">Last name:</label>
<input type="text" name="lastName"/>
</li>
<li>
<label id="email">E-Mail:</label>
<input type="text" name="email"/>
</li>
<li>
<label id="mobileNumber">Mobile number:</label>
<input type="text" name="mobileNumber"/>
</li>
<li><a id="registerButton" href="#" onclick="document.forms['registerForm'].submit();">Register</a>&nbsp;<a id="clearButton" href="#" onclick="document.forms['registerForm'].reset();">Clear</a></li>
</ul>
</div>
</form>
</div>
<div id="copyRight">
<center><p>Copyright &copy; 2014 My sweet home All Rights Reserved</p></center>
</div>
</body>
</html>

CSS 代码:

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

body {

background-image:url('../images/background.jpg');
background-attachment:fixed;

}

#mainDiv {

margin:0px auto;
width:1000px;
height:auto;
background-color:white;
border-radius:0px 0px 10px 10px;

}

#logoDiv {

padding-top:10px;
padding-left:10px;
padding-bottom:10px;

}

#logo {

float:left;

}
#logo img {

width:200px;

}

#headingDiv {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;

}
#headingDiv h1{

padding-top:20px;
padding-left:250px;
font-weight:bold;
font-size:30px;

}

#headingDiv h3{

padding-top:5px;
padding-left:289px;
font-style:italic;
font-size:15px;

}

#menuDiv {

padding-top:40px;
width:980px;
margin:0px auto;

}

#menuDiv ul {

height:35px;
background-color:black;
border-radius:5px;

}

#menuDiv li {

display:inline;
float:left;
padding-top:10px;
padding-bottom:10px;
border-right:1px gray solid;

}

#menuDiv li a {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:white;
padding:10px;

}

#menuDiv ul li a#selectedMenuHome {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;
border-radius:5px 0px 0px 5px;

}

#menuDiv ul li a#selectedMenu {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;

}


#menuDiv li a:hover {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;

}

#menuDiv li a#homeRound:hover {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:black;
background-color:orange;
padding-top:9px;
padding-bottom:9px;
border-radius:5px 0px 0px 5px;

}

#informationDiv {

width:980px;
margin:0px auto;
padding-top:10px;

}

#informationDiv ul {

padding:2px;
background-color:silver;
border-radius:5px;

}

#informationDiv ul li {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
display:inline;
color:black;
padding-right:20px;

}

#validationMessages {

width:490px;
margin-left:10px;
margin-top:10px;
padding-bottom:10px;
background-color:#f2dede;
border-radius:5px;

}

#validationMessages #validationHeading p {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-top:20px;
padding-left:30px;
color:#b94a48;
text-decoration:underline;

}

#validationMessages #errors ul {

padding-left:48px;
padding-top:10px;

}

#validationMessages #errors ul li {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color:#b94a48;
font-size:15px;
list-style:decimal;

}

#validationmessageArrow {

padding-left:30px;

}

#arrowSymbol {

width:0;
height:0;
padding-left:5px;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-top:15px solid #f2dede;
margin-top:-1px;

}


#searchDiv {

width:980px;
margin:0px auto;
padding-top:10px;

}

#searchInnerDiv {

height:auto;
border:1px black solid;
border-radius:5px;
background-image:url('../images/searchBackground.jpg');
background-size:1920px 350px;
background-attachment:scroll;
background-repeat:no-repeat;

}

#searchLocality ul {

padding:5px;

}

#searchLocality ul li {

display:inline;

}

#searchLocality ul li label {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-left:20px;

}

#searchLocality ul li input#autocomplete {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:337px;

}

#searchLocality ul li label#exampleLightColor {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
color:#999999;
padding-left:5px;

}

#searchLocality ul li label#area {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
color:black;
padding-left:23px;

}


#searchLocality ul li input#sublocality_level_2 {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:150px;

}

#localityDiv ul {

padding:5px;

}

#localityDiv ul li {

display:inline;
padding-left:20px;

}

#localityDiv ul li label {

padding-right:17px;
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;

}

#localityDiv ul li select {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:150px;
border:1px black solid;

}

#localityDiv ul li input {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:150px;
border:1px black solid;

}

#propertySearch ul {

padding:5px;

}

#propertySearch ul li {

display:inline;
padding-left:20px;

}

#propertySearch ul li label {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:20px;

}

#propertySearch ul li select {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:150px;
border:1px black solid;

}

#propertySearch ul li input {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:92px;
border:1px black solid;

}

#searchButtons {

padding-top:10px;
padding-left:25px;
width:980px;

}

#advancedSearch {

float:left;

}

#advancedSearch a {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:200px;
text-decoration:underline;
color:white;
padding:2px;
background-color:black;
border-radius:5px;
padding-left:10px;
padding-right:10px;

}

#advancedSearch a:hover {

background-color:orange;
padding-bottom:2px;
padding-top:2px;
color:black;
border-radius:5px;
padding-left:10px;
padding-right:10px;

}

#searchButton {

padding-right:50px;
float:none;
padding-bottom:10px;

}

#searchButton a {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
text-decoration:underline;
color:white;
padding:2px;
background-color:black;
border-radius:5px;
padding-left:20px;
padding-right:20px;
margin-left:718px;
text-decoration:none;

}

#searchButton a:hover {

background-color:orange;
padding-bottom:2px;
padding-top:2px;
color:black;
border-radius:5px;
padding-left:20px;
padding-right:20px;
text-decoration:none;

}

#bodyTag {

width:980px;
margin:0px auto;
padding-top:10px;
padding-bottom:15px;

}

#bodyTag ul {

height:auto;
border:1px black solid;
padding-left:317px;
padding-right:317px;
padding-top:80px;
padding-bottom:70px;
border-radius:5px;
background-image:url('../images/formsBackground.jpg');
background-size:980px 600px;
background-attachment:scroll;
background-repeat:no-repeat;

}

#bodyTag ul li {

display:block;
padding-bottom:10px;

}

#bodyTag ul li input {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:250px;

}

#bodyTag ul li label#login {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:41px;
width:10px;
text-decoration:underline;

}

#bodyTag ul li label#email {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:41px;
width:10px;

}

#bodyTag ul li label#password {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:20px;
width:10px;

}

#bodyTag ul li a#loginButton {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;

}

#bodyTag ul li a#loginButton:hover {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
border-radius:5px;
padding:2px 25px 2px 25px;
text-decoration:none;

}

#bodyTag ul li a#clearButton {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;

}

#bodyTag ul li a#clearButton:hover {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
padding:2px 25px 2px 25px;
border-radius:5px;
text-decoration:none;

}

#registerTag {

width:980px;
margin:0px auto;
padding-top:10px;
padding-bottom:15px;

}

#registerTag ul {

padding:50px 300px;
height:auto;
border:1px black solid;
border-radius:5px;
background-image:url('../images/formsBackground.jpg');
background-size:980px 600px;
background-attachment:scroll;
background-repeat:no-repeat;

}

#registerTag ul li {

display:block;
padding-bottom:10px;

}

#registerTag ul li input {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:248px;

}

#registerTag ul li select {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border:1px black solid;
width:250px;

}

#registerTag ul li label#register {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
width:10px;
text-decoration:underline;

}

#registerTag ul li label#firstName {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:29px;
width:10px;

}

#registerTag ul li label#lastName {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:32px;
width:10px;

}

#registerTag ul li label#email {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:54px;
width:10px;

}

#registerTag ul li label#mobileNumber {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
padding-right:0px;
width:10px;

}

#registerTag ul li a#registerButton {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;

}

#registerTag ul li a#registerButton:hover {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
padding:2px 25px 2px 25px;
border-radius:5px;
text-decoration:none;

}

#registerTag ul li a#clearButton {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
border-radius:5px;
background-color:black;
color:white;
padding:2px 25px 2px 25px;
border:1px black solid;
text-decoration:none;

}

#registerTag ul li a#clearButton:hover {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
background-color:orange;
color:black;
border:1px orange solid;
padding:2px 25px 2px 25px;
border-radius:5px;
text-decoration:none;

}

#copyRight {

padding-top:10px;
padding-bottom:10px;

}

#copyRight p {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
color:black;

}

#helpContentTag {

width:980px;
margin:0px auto;
padding-top:10px;
padding-bottom:15px;

}

#helpContentTag ul {

height:auto;
border: 1px black solid;
padding-left:200px;
padding-right:200px;
padding-top:80px;
padding-bottom:70px;
border-radius:5px;
background-image:url('../images/formsBackground.jpg');
background-size:980px 900px;
background-attachment:scroll;
background-repeat:no-repeat;

}

#helpContentTag ul li {

display:block;
padding-bottom:10px;

}

#helpContentTag ul li p {

font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:15px;
text-align:justify;

}

最佳答案

这是一个fiddle对于您发布的代码。

您的“公司 Logo ”图像在 Chrome 中将菜单项推向右侧,但占位符图像在 IE 中的高度不同,因此菜单项显示为左对齐。

如果这是您正在谈论的问题,您可以通过将其添加到您的 css 文件来将菜单的第一项快速移动到右侧:

#menuDiv li:first-child {
margin-left: 200px;
}

如果这不是您所指的对齐问题,请更具体一些。

关于不同浏览器的 HTML 和 CSS 对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25533015/

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