根据缩放，我的div重叠不同......非常奇怪（所有浏览器）

时间：2011-06-02 12:07:14

标签： css html zoom fadeout

http://www.kikbo.com/secret/about.html

这打破了我的球...取决于浏览器使用的缩放级别，我的盒子没有排列，它看起来像狗屎（在所有浏览器中）。有什么建议？我可以用jQuery更容易地做到这一点吗？

HTML 

</div>
<div class="tile" id = 'tile1' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>CPSIA</div>
<div class="tile" id = 'tile2' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>Drugs</div>
<div class="tile" id = 'tile3' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>Robots</div>
<div class="tile" id = 'tile4' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br>The<br>Kikbo<br>Story<br></div>
<div class="tile-right" id = 'tile5' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br>What's with the crazy colors?</div>
<div class="tile" id = 'tile6' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);">Are Kikbos available outside the United States?</div>
<div class="tile" id = 'tile7' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile" id = 'tile8' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile" id = 'tile9' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-right" id = 'tile10' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br>Where can I get my very own Kikbo?</div>
<div class="tile-bottom" id = 'tile11' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom" id = 'tile12' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom" id = 'tile13' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom" id = 'tile14' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom-right" id = 'tile15' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-small"><br><br>CPSIA</div>
<div class="tile-small"><br><br>˼½Ý</div>
<div class="tile-small"><br><br>RobsdfsdafotsÊ®´ó¸»ÉÌ´ó·¨Ê¦´ó·¨</div>
<div class="tile-small">Founded in Jan 2010, our mission is to entrench Kikbo Kick Shuttlecocks</div>
<div class="tile-right-small">There are six buttons up top and six feathers in every pack. The probability of each color appearing is the same for the buttons as it is for the feathers. <a href="javascript:colorize()">Try for yourself.</a></div>
<div class="tile-small"><br><br>nope.</div>
<div class="tile-small"><br><br>helasflo!</div>
<div class="tile-small"><br><br>helasdflo!</div>
<div class="tile-small"><br><br>hello!</div>
<div class="tile-right-small"><br><br>nowhere.</div>
<div class="tile-bottom-small"><br><br>asdfas</div>
<div class="tile-bottom-small"><br><br>hellasdfo!</div>
<div class="tile-bottom-small"><br><br>hello!</div>
<div class="tile-bottom-small"><br><br>hello!</div>
<div class="tile-bottom-right-small"><br><br>hello!</div>
</div>

CSS 

div.tile {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}

div.tile:hover {
cursor: pointer;
}

div.tile-right{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}

div.tile-right:hover {
cursor: pointer;
}

div.tile-bottom {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}

div.tile-bottom:hover {
cursor: pointer;
}

div.tile-bottom-right{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}

div.tile-bottom-right:hover {
cursor: pointer;
}

div.tile-small {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}

div.tile-right-small{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}

div.tile-bottom-small {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}

div.tile-bottom-right-small{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}

的Javascript 

document.write("<style type='text/css'>#big-pic {visibility:hidden;} </style>");
document.write("<style type='text/css'>#gallery {visibility:hidden;} </style>");

function startFade(objId,x) {
  obj = document.getElementById(objId);
  if (x == 'in') {
  setOpacity(obj, 0);
  obj.style.visibility = 'visible';
  fadeIn(objId,0);
  }
  else if (x == 'out') {
  setOpacity(obj, 100);
  fadeOut(objId,100);
  }
  else {
  alert('You must set x to "in" or "out"');
  }
}

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.99999999999:opacity;

  // IE4,5,6,7
  obj.style.filter = "alpha(opacity:"+opacity+")";

  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;

}

function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) { //function calls itself if the opacity is not yet over 100
      setOpacity(obj, opacity);
      opacity += 5; // the increment by which the opacity % changes. 
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 50); //=> the opacity will change by the increment in the line above every X seconds where X is the lenght of the setTimeout
    }
    else {
    obj.style.removeAttribute('filter'); //IE bug
    }
  }
}

function fadeOut(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity >= 0) { //function calls itself if the opacity is not yet under zero
      setOpacity(obj, opacity);
      opacity -= 5; // the increment by which the opacity % changes. 
      window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 50); //=> the opacity will change by the increment in the line above every X seconds where X is the lenght of the setTimeout
    }
    else {
    obj.style.display = 'none';
    }
  }
}


window.onload = function() {
    startFade('big-pic','in');
    window.setTimeout("startFade('whitediv_headings','out');",1400);
    window.setTimeout("startFade('gallery','in');",2800); //maybe change to a white div to present a choppy intro...?!
    window.setTimeout("startFade('whitediv_navbar','out');",2800);
    window.setTimeout("startFade('whitediv_text-right','out');",2800);
};

function fadeOutNoDisplay(objId,opacity) {
  if (document.getElementById) {
    document.getElementById(objId).onclick = null;
    document.getElementById(objId).onmouseover = null;
    document.getElementById(objId).onmouseout = null;
    obj = document.getElementById(objId);
    if (opacity >= 0) { //function calls itself if the opacity is not yet under zero
      setOpacity(obj, opacity);
      opacity -= 5; // the increment by which the opacity % changes. 
      window.setTimeout("fadeOutNoDisplay('"+objId+"',"+opacity+")", 50); //=> the opacity will change by the increment in the line above every X seconds where X is the lenght of the setTimeout
    }
    else {
    document.getElementById(objId).style.visibility = 'hidden';
    }
  }
}

1 个答案:

答案 0 :(得分：0)

我将所有内容从float: left更改为position: absolute，无论缩放级别如何，一切都开始正常显示

相关问题
最新问题