Question

首先，我不认为自己不仅仅是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>

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

iframe中的HTML锚点无法在Chrome或Safari中使用

1 个答案: