Chrome或Safari浏览器中iframe中的HTML锚点无法使用

Question

Chrome或Safari浏览器中iframe中的HTML锚点无法使用

5

首先，我认为自己只是一个HTML/CSS的菜鸟。话虽如此，我在Chrome和Safari浏览器上遇到了问题（Firefox和Opera表现良好）。问题在于，单击中心iframe中的某个帮助图标应该将正确的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>

- Officer Dangle

在 Windows 系统下，Opera 11、Firefox 14、Safari 5 和 Chrome 20 中都能正常运行。 - Jay

在Chrome 21（Windows）和Safari 6（Mac）中验证未能正常工作。 - Officer Dangle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Passmore · Answer 1

删除：

scrolling="no"

它适用于 Windows 上的 Chrome 21。

编辑

仍然删除 scrolling="no"，但将 Help.html 的 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