css - 根据缩放比例，我的 div 重叠不同......真的很奇怪(所有浏览器)

标签 css html zooming 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';
    }
  }
}

最佳答案

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

关于css - 根据缩放比例，我的 div 重叠不同......真的很奇怪(所有浏览器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6214303/

上一篇：css - 带有背景的样式化 Firefox 扩展按钮

下一篇：jquery - 幻灯片剧烈闪烁

相关文章：

javascript - 添加 Assets 过滤器修复后 CakePHP 主题 CSS 和 JS 损坏

javascript - 如何使用javascript隐藏一个div

HTML/CSS 并排列

javascript - 图像缩放功能，如 imgur.com

html - 放大窗口的一部分

css - 淡入淡出 2 个不透明度为 0.7 的图像

html - 如何水平对齐表格中的列

jquery - 我需要 CSS 中的玻璃形状

html - 如果溢出容器换行到下一列

ios - 如何在单个 UIView 中启用两个不同 UIScrollview 的缩放？

©2024 IT工具网  联系我们