iframe中的HTML锚点在Chrome或Safari中不起作用

首先我不认为自己只是HTML/CSS中的黑客攻击。这就是说，我在Chrome和Safari中附带的代码存在问题（Firefox和Opera完美无缺）。问题是单击中心的帮助图标之一iframe应该将正确的iframe发送到适当的锚点，但它不会。我希望帮助主题不需要滚动条即可从主题转到主题。iframe中的HTML锚点在Chrome或Safari中不起作用

的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; 
}

任何帮助，将不胜感激

我想加入帮助。 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>

来源

2012-09-13 Officer Dangle

工作正常，在Opera 11，Firefor 14，Safari 5的和Windows下的Chrome 20。 – Jay

已验证在Chrome 21（windows）和Safari 6（mac）中无法正常工作 –

删除：

scrolling="no"

，它适用于Chrome浏览器21的窗口。

编辑

不过除去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-14 22:49:32

感谢David，但我之前应该说过，帮助旁边的滚动条是不可接受的。同样在你的测试中，spacer的css定义被删除，所以整个帮助都适合窗口。 –

@OfficerDangle查看我的编辑 –

谢谢David！就像我想要的那样工作。 –

iframe中的HTML锚点在Chrome或Safari中不起作用

回答

相关问题