html - css 只能在 chrome 中正常工作-6ren

html - css 只能在 chrome 中正常工作

转载作者：太空宇宙更新时间：2023-11-03 20:21:41

我正在尝试通过 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>

JS Fiddle reproduction of the above HTML/CSS .

最佳答案

在 #wrapper 中，您将高度指定为 100%%。

将其更改为 100% 似乎可以解决大部分问题。

关于html - css 只能在 chrome 中正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9234597/

全站热门文章

首页

博学

6Ren·AI

商城

html - css 只能在 chrome 中正常工作