为什么html框架在Firefox和IE8中表现不同?

时间:2010-05-04 20:51:56

标签: html firefox browser internet-explorer-8 frame

我在我的网站上使用html框架,它一直在为我运行,通常我只使用Firefox浏览网页,我的网站外观和功能正常,但今天我突然发现IE8在我的网站上有框架问题,如果我点击顶部菜单项,它应该在框架的下半部分显示内容,它在Firefox中正确地执行此操作,但在IE8中,它在框架的上半部分显示内容并替换菜单项目

为了提供更多细节,我将包含我的html页面的简化版本,在顶层有两个项目,一个是index.html页面和一个文件目录,除了index.html之外的所有页面都是在目录中,所以它看起来像这样:

index.html
Dir_Docs
  00_Home.html
  00_Install_Java.html
  00_Top_Menu.html
  01_Home_Menu.html
  01_Install_Java_Menu.html
  10_Home_Welcome.html
  10_How_To_Install_Java.html

[ index.html ]
<Html>
  <Head><Title>Java Applications : Tv_Panel, Java_Sound, Biz Manager and Web Academy</Title></Head>

<Frameset Rows="36,*" Border=5 Bordercolor=#006B9F>
  <Frame Src=Dir_Docs/00_Top_Menu.html Frameborder=YES Scrolling=no Marginheight=1 Marginwidth=1>
  <Frame Src=Dir_Docs/00_Home.html Name=lower_frame Marginheight=1 Marginwidth=1>
</Frameset>
</Html>

[ 00_Home.html ]
<Html>
  <Head><Title>NMJava Application Development</Title></Head>

  <Frameset Cols="217,*" Align=center BorderColor="#006B9F">
    <Frame Src=01_Home_Menu.html Frameborder=YES Name=side_menu Marginheight=1 Marginwidth=1>
    <Frame Src=10_Home_Welcome.html Name=content Marginheight=1 Marginwidth=1>
  </Frameset>
</Html>

[ 00_Install_Java.html ]
<Html>
  <Head>
    <Title>Install Java</Title>
</Head>

  <Frameset Cols="217,*" Align=center BorderColor="#006B9F">
    <Frame Src=01_Install_Java_Menu.html Frameborder=YES Name=side_menu Marginheight=1 Marginwidth=1>
    <Frame Src=10_How_To_Install_Java.html Name=content Marginheight=1 Marginwidth=1>
  </Frameset>
</Html>

[ 00_Top_Menu.html ]
<Html>
  <Head>Top Menu</Head>
<Body>
<Center>

<Base target=lower_frame>

<Table Border=1 Cellpadding=3 Width=100%>
  <Tr>
    <Td Align=Center Bgcolor=#3366FF><A Href=00_Home.html><Font Size=4 Color=White>Home</Font></A></Td>
    <Td Align=Center Bgcolor=#3366FF><A Href=00_Install_Java.html><Font Size=4 Color=White>Install Java</Font></A></Td>
  </Tr>
</Table>

</Center>

</Body>
</Html>

[ 01_Home_Menu.html ]
<Html>
  <Head><Title>Home Menu</Title></Head>

<Base Target=content>
<Body Bgcolor=#7799DD>
  <Center>
    <Table Border=1 Width=100%>
      <Tr><Td Align=center Bgcolor=#66AAFF><A Href=10_Home_Welcome.html>Welcome</A></Td></Tr>
    </Table>
  </Center>
</Body>

</Html>

[ 01_Install_Java_Menu.html ]
<Html>
  <Head><Title>Install Java</Title></Head>

<Base Target=content>
<Body Bgcolor=#7799DD>
  <Center>
    <Table Border=1 Width=100%>
      <Tr><Td Align=Center Bgcolor=#66AAFF><A Href=10_How_To_Install_Java.html>How To Install Java ?</A></Td></Tr>
    </Table>
  </Center>
</Body>

</Html>

[ 10_Home_Welcome.html ]
<Html>
  <Head><Title>NMJava For Software Development</Title></Head>
<Body>

<Center>
  <P>
  <Font Size=5 Color=blue>Welcome To NMJava For Software Development</Font>
  <P>

</Center>
</Body>
</Html>

[ 10_How_To_Install_Java.html ]
<Html>
  <Head>
    <Title>Install Java</Title>
  </Head>

  <Body>
    <Center>

    <Br>
    <Font Size=5 Color=#0022AE><A Href=http://java.com/en/download/index.jsp>How To Install Java ?</A></Font>
    <Br>
    <P>
    <Table Width=90% Cellspacing=5 Cellpadding=5>
      <Tr><Td><Font Color=#0022AE>
        You need JRE 6 (Java Runtime Environment) to run the programs on this site. You may or may not have Java already installed on your PC, you can find out by going to the following 
site, if you don't have the latest version, you can install/upgrade it, it's free from Sun/Oracle at :<Font Size=4> <A Href=http://java.com/en/download/index.jsp>http://java.com/en/download/index.jsp</A></Font>.<P>
      </Font></Td></Tr>
    </Table>
    </Center>

  </Body>
</Html>

它们有什么问题,为什么两个浏览器的行为方式不同,以及如何解决这个问题?

我的网站位于:http://nmjava.com,以防您想查看更多详情。

3 个答案:

答案 0 :(得分:2)

您可以在HEAD

中强制IE8的行为与IE7相同
<meta http-equiv="X-UA-Compatible" content="IE=7" />

虽然这不能解释问题,但通常是一个快速修复。

在IE8中,按F-12进入调试窗口。它可以帮助您在HTML中找到问题。查看您的页面所处的文档模式。如果它处于“怪癖模式”,则表示您遇到了麻烦。

Quoo 说的是真的,在不使用框架的情况下重新考虑您的设计。

alt text http://preview.moveable.com/jm/images/ie8.png

答案 1 :(得分:2)

您的HTML无效,并且已知IE会因无效的html而绊倒,从而导致奇怪的行为。说实话,有点难以弄清楚你的代码中发生了什么,因为它非常标准。您应该熟悉html最佳实践 - 与W3(w3.org)一样,列表是一个很好的资源(http://www.alistapart.com/),您可能会发现它们的验证器很有用(validator.w3.org)。首先,html标签中的任何属性都必须使用引号,而html标签应全部为小写。

此外,要定位另一个框架,您的锚标记应该看起来像<a href="myurl.html" target="_frameName" />

答案 2 :(得分:2)

<Body>
<Center>

<Base target=lower_frame>

这是你的具体问题。 <base>仅允许在<head>内,而不是<body>的一部分。 IE的早期版本让你逃脱它; IE8没有。它忽略了错位的基础,因此留下了针对当前帧的链接。

然而,你可能会遇到更多奇怪的问题,因为你的标记在各种基本方面都是无效的,除了框架之外是不可取的。