4

まず、私は自分自身をHTML/CSSのハック以上のものだとは考えていません。そうは言っても、ChromeとSafariの添付コードに問題があります（FirefoxとOperaは完全に正常に動作します）。問題は、中央のiframeのヘルプアイコンの1つをクリックすると、正しいiframeが適切なアンカーに送信されるはずですが、そうではありません。ヘルプトピックをスクロールバーなしでトピック間を移動したいのですが。

index.html

<!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>Lorem ipsum dolor</title>
<link href="apstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Body">
    <div class="leftnav"><p>Something</p></div>
    <div class="main"><iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"></iframe></div>
    <div class="right"><iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"></iframe></div>
</div>
</body>
</html>

Setup.html

<!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" />
<link href="apstyle.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="options">
    <p>Get Help #2
    <a href="Help.html#help2" target="help">
        <img src="helpicon16.png" alt="help2" class="help_icon"/>
    </a>
    </p>
    <p>Get Help #3
    <a href="Help.html#help3" target="help">
        <img src="helpicon16.png" alt="help3" class="help_icon"/>
    </a>
    </p>
</div>
</body>
</html>

とcss

@charset "UTF-8";

.Body {
float : left;
clear : both;
width : 100%;
margin-top : 5px;
margin-bottom : 5px;
}

.leftnav {
float : left;
height : 500px;
width : 155px;
margin-left : 25px;
background-color : #eae6e3;
}

.main {
float : left;
height : 500px;
width : 445px;
margin-left : 5px;
}
.right {
clear : right;
float : left;
height : 500px;
width : 185px;
margin-left : 5px;
}

iframe.help {
overflow : hidden;
}

div.spacer {
height: 1000px;
}

どんな助けでも大歓迎です

Help.htmlを追加すると、これを複製しやすくなると思います

Help.html

<!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>Help</title>
<link href="apstyle.css" rel="stylesheet" />
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>

<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>

<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>

<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>

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

1 に答える 1

0

削除する ： 

scrolling="no"

そしてそれはWindows上のChrome21で動作します。

編集

それでも削除しますscrolling="no"が、HTMLコードを次のように変更しHelp.htmlます。

<!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>Help</title>
<link href="apstyle.css" rel="stylesheet" />
<style>
html {
    overflow:hidden;
}
</style>
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>

<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>

<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>

<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>

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

ここを参照してください：testing.dpwebdev.co.uk/stackoverflow/anchors

于 2012-09-14T22:49:32.253 に答える