我正在尝试通过 CSS 设计一个页面，问题是当我试图在 Google Chrome 以外的浏览器上显示我的页面时，它不起作用，它显示了损坏的设计页面，该设计仅在 chrome 上完美运行，我使用代码前缀使我的 css3 代码匹配所有浏览器。
这是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>anaawez</title>
</head>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 97%;
background-image: url(bg.jpg);
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial; /*background-origin*/
-webkit-background-origin: initial;
-moz-background-origin: initial;
background-origin: initial; /*background-clip*/
-webkit-background-clip: initial;
background-color: #718693;
}
#wrapper {
background: white;
border: 1px solid #000;
margin: auto;
margin-top: 10px;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
height: 100%%; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#header {
height: 8%;
background-color: white;
font-family: verdana;
font-size: 15px;
margin: 10px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}
#headerleft {
text-align: left;
vertical-align: top;
float: left;
}
#headerright {
text-align: right;
float: right;
}
#search {
height: 5%;
text-align: center;
}
#container {
height: 50%;
text-align: right;
font-family: verdana;
font-size: 15px;
margin: 10px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
#blockcontainer {
height: 80%;
}
#blockouterleft {
float: left;
width: 65%;
height: 39%;
margin-top: 5px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#blockinnerleftleft {
float: left;
width: 45%;
height: 100%;
background-color: #FDFDFD; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: thin dotted #999;
height: 100% vertical-align: middle;
}
#blockinnerleftmiddle {
float: right;
width: 45%;
height: 100%;
background-color: #FDFDFD; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: thin dotted #999;
}
#blockouterright {
float: right;
width: 35%;
height: 39%;
margin-top: 5px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#blockinnerrightleft {
float: right;
width: 84.1%;
height: 100%;
background-color: #FDFDFD; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: thin dotted #999;
}
#tagcloud {
height: 18%;
background-image: -webkit-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: -moz-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: -o-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: -ms-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
-image-image background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, rgb(17,28,46)), color-stop(0.66, rgb(13,21,26)) );
text-align: right;
font-family: verdana;
font-size: 15px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
#contenttext {
margin: 3px;
font-size: 10px;
height: 100%;
}
#image {
float: left;
margin: 3px;
font-size: 10px;
height: 100%;
}
</style>
<body >
<div id="wrapper">
<div id="header" >
<div id="headerright">Login with Facebook | Contact Us| Help </div>
<div id="headerleft"><img src="anaawez.png" /></div>
</div>
<div id="search">
<form>
<label>ANA AWEZ</label>
<input type="text" />
<select name="type">
<option name="work" value="work">work</option>
</select>
<input type="button" value="submit" />
</form>
</div>
<div id="container">
<div id="blockcontainer">
<div id="blockouterleft">
<div id="blockinnerleftleft">
<div >
<div id="image" ><p ><img src="dta2.png" align="left" height="90px" width="90px"/></p></div></div>
<div id="contenttext">i want you to spread my shitty facebook application , please i need to steal your data ASAP ! :D <a href="#">view ad</a></div>
</div>
<div id="blockinnerleftmiddle"></div>
</div>
<div id="blockouterright">
<div id="blockinnerrightleft"></div>
</div>
<div id="blockouterleft">
<div id="blockinnerleftleft"></div>
<div id="blockinnerleftmiddle"></div>
</div>
<div id="blockouterright">
<div id="blockinnerrightleft"></div>
</div>
<div id="blockouterleft">
<div id="blockinnerleftleft"></div>
<div id="blockinnerleftmiddle"></div>
</div>
<div id="blockouterright">
<div id="blockinnerrightleft"></div>
</div>
</div>
</div>
<div id="tagcloud">BlackBerry IPHONE 4GS SAMSUNG GALAXY SII MIDO BADER JOB PROGRAMMER </div>
<div id="bottom"></div>
</div>
</body>
</html>
最佳答案
在 #wrapper 中，您将高度指定为 100%%。
将其更改为 100% 似乎可以解决大部分问题。
关于html - css 只能在 chrome 中正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9234597/