0

私のウェブサイトhttp://scissormanmusic.com/をドロイドで表示すると、左側の 200(ish)px が切り取られて表示されます。しかし、Firefox、Safari、Chrome などのデスクトップ/ラップトップ コンピューターの Web ブラウザーで表示すると、切断されません。理由はわかりません。これを修正する最善の方法は何ですか。コードは次のとおりです。

<!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>

ありがとう！

4

2 に答える 2

0

固定位置を指定せずに、固定位置をmargin使用することを主張する場合はmedia query、ビューポートの幅を検出するために使用してから、別のright位置を指定してみてください。

于 2012-06-04T21:05:22.517 に答える
0

CSS に問題があります。これを試してください：（コードで必要なものをオーバーライドしてください）

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

また、インラインではなく別のファイル (style.css など) でこの CSS を使用することもできます。

于 2012-06-04T20:33:04.570 に答える