Question

我的wesite，http://scissormanmusic.com/在我的机器人上观看它时令人难以置信，显示左侧200（ish）px切断。但是，当我在桌面/笔记本电脑网络浏览器（如Firefox，Safari或Chrome）上查看时，切断不会发生。我不知道为什么。解决这个问题的最佳方法是什么？这是代码：

<!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> || ScissormanMusic.com || </title>

<script language="javascript">
function simplePreload()
{ 
  var args = simplePreload.arguments;
  document.imageArray = new Array(args.length);
  for(var i=0; i<args.length; i++)
  {
    document.imageArray[i] = new Image;
    document.imageArray[i].src = args[i];
  }  
}
simplePreload( 'news.png','newsRO.png','beats.png','beatsRO.png','music.png','musicRO.png','contact.png','contactRO.png','links.png','linksRO.png','scissorsHeader.png','scissorLeftLeftHeader.png','facebook.png','twitter.png','leftHeader.png','rightHeader.png' ); 
</script>

<style type="text/css">
a:link {color:#222229; text-decoration:none; border:none;}
a:visited {color:#222229; text-decoration:none; border:none;}
a:hover {color:#222229; text-decoration:underline; border:none;}
a:focus {color:#222229; text-decoration:none; border:none;}
a:active {color:#222229; text-decoration:none; border:none;}
html {
    background-color:#222229;
    margin:auto;
}
body {
    background:#222229;
    margin:0;
}   
#scissorsHeader{
    position:fixed center center;
}
#headerLeft {
    position:relative;
    right:408px;
    bottom:347px;
}
#headerLeftLeft {
    position:relative;
    right:640px;
    bottom:765px;
}
#headerRight {
    position:relative;
    left:344px;
    bottom:450px;
}
#twitter {
    position:relative;
    left:573px;
    bottom:907px;
}
#facebook {
    position:relative;
    left:573px;
    bottom:914px;
}
#leftMenu {
    position:relative;
    left:186px;
    bottom:451px;
    width:700px;
}
#rightMenu {
    position:relative;
    left:942px;
    bottom:524px;
    width:700px;        
}
#leftFrame {
    position:relative;
    right:450px;
    bottom:900px;
    z-index:3;  
    width:800px;
    height:2000px;
}
#rightFrame {
    position:relative;
    left:472px;
    bottom:2900px;
    z-index:4;  
    width:800px;
    height:2000px;  
}
#menuContainer {
    position:relative;
    right:600px;
}
#everything{
    position:relative;
    left:150px; 
}
</style>


</head>
<body>
<div id="everything" align="center">
<div id="scissorsHeader" align="center"><img src="scissorsHeader.png"/></div>

<div id="headerLeft" align="center"><img src="headerLeft.png"/></div>
<div id="headerRight" align="center"><img src="headerRight.png"/></div>

<div id="menuContainer" align="center">

<div id="leftMenu" align="center">

<a href="news.html" target="leftFrame">
<img name="news" src="news.png" 
onmouseover="document.news.src='newsRO.png'" 
onmouseout="document.news.src='news.png'"/>
</a>

<a href="beats.html" target="leftFrame">
<img name="beats" src="beats.png" 
onmouseover="document.beats.src='beatsRO.png'" 
onmouseout="document.beats.src='beats.png'"/>
</a>

<a href="music.html" target="leftFrame">
<img name="music" src="music.png" 
onmouseover="document.music.src='musicRO.png'" 
onmouseout="document.music.src='music.png'"/>
</a>
</div>

<div id="rightMenu" align="center">
<a href="contact.html" target="rightFrame">
<img name="contact" src="contact.png" 
onmouseover="document.contact.src='contactRO.png'" 
onmouseout="document.contact.src='contact.png'"/>
</a>

<a href="links.html" target="rightFrame">
<img name="links" src="links.png" 
onmouseover="document.links.src='linksRO.png'" 
onmouseout="document.links.src='links.png'"/>
</a>
</div>
</div>


<div id="headerLeftLeft" align="center"><img src="scissorLeftLeftHeader.png"/></div>
<div id="facebook" align="center"><a href="http://www.facebook.com/scissormanmusic"     target="_new"><img src="facebook.png"/></a></div>
<div id="twitter" align="center">
<a href="http://www.twitter.com/scissormanmusic" target="_new"><img src="twitterLogo.png"/></a></div>

<br /><br /><br /><br /><br />

<div align="center">
<iframe src="news.html" name="leftFrame" id="leftFrame" style="border:hidden" scrolling="no"></iframe>
</div>

<div align="center">
<iframe src="contact.html" name="rightFrame" id="rightFrame" style="border:hidden" scrolling="no"></iframe>
</div>

</div>
</body>
</html>

谢谢！

Answer 1

您遇到CSS问题。试试这个:(覆盖你代码上的需要）

#leftFrame {
    position:relative;
    right:400px; /*change here any value*/
    bottom:900px;
    z-index:3;  
    width:800px;
    height:2000px;
}

此外，您可能希望在另一个文件（例如style.css）上使用此CSS，而不是内联。

Answer 2

没有给出固定定位你可以试着给margin如果你坚持使用固定定位那么你会尝试使用media query来检测视口宽度然后给出不同的right定位是什么？

网页的左侧在Android手机上切断，但在Chrome，Safari和Firefox上看起来很不错

2 个答案: