0

我有问题...我正在用一点点 css 编写简单的 html 页面。在 IE 中一切看起来都很好，但如果我用 chrome 启动它 - 菜单和我的 ContentPanel (iframe) 并不一致。

我该怎么办？我只能使用 HTML 和 CSS 之类的

我的 CSS 代码的一小段： 1. 按钮菜单 - 2O%

ul#buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
float: left;
}

iframe - 因为我在 html 页面上的第二个元素的宽度为 80%。

iframe{
height:100%;
width:80%;
float: right;}

在 IE 中它看起来不错，但在 chrome 中则不行....有任何一般规则如何解决它吗？

我的 html 的一部分看起来像：

 <div id="container" style="width:100%">

  <div id="header" style="background-color:#CDB4C8;",widht=100%>
<h1 style="margin-bottom:0;">Name</h1></div>



  <ul id="buttonmenu">
  <li class="current"><a href="first.html" target = "content">first page</a></li>
  <li><a href="second.html" target="content">Second page</a></li>
  <li><a href="third.html"  target="content">Third page</a></li>
  <li><a href="fourth.html" target="content">Fourth page</a></li>
  <li><a href="contact.html" target="content">Contact</a></li>
  </ul>


 <iFrame id="content" name="content" style="background-color:#EEEEEE;float:left;">
  </div>

这段代码的小提琴

4

2 回答 2

1

如果您将 iframe 宽度的宽度缩小到 79%，则它是并列的。

iframe{
    height:100%;
    width:79%;
    float: right;
}

或者，您可以删除 iframe 的边框并保持 80% 的宽度：

iframe {
    height:100%;
    width:80%;
    border: 0;
    float: right;
}

带有宽度的示例jsfiddle：79%或带有边框的示例 jsfiddle：0

另外，我认为您在这里搞砸了代码：

<div id="header" style="background-color:#CDB4C8;",widht=100%>

我想你想把：

<div id="header" style="background-color:#CDB4C8; width: 100%;">
于 2012-12-24T21:53:22.033 回答
0

取出 iframe 中的边框，然后我在它之后做了一个浮动清除，这样容器的高度就会被保留，以防你忘记:)

<html>
<head>
<title></title>
<style type="text/css">
body{margin:0; padding:0;}

ul#buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
float: left;
}

#content{
height:100%;
width:80%;
float: right !important;
border:none;}
</style>
</head>
<body>
<div id="container" style="width:100%">

<div id="header" style="background-color:#CDB4C8;",widht=100%>
<h1 style="margin-bottom:0;">Name</h1></div>
<ul id="buttonmenu">
<li class="current"><a href="first.html" target = "content">first page</a></li>
<li><a href="second.html" target="content">Second page</a></li>
<li><a href="third.html"  target="content">Third page</a></li>
<li><a href="fourth.html" target="content">Fourth page</a></li>
<li><a href="contact.html" target="content">Contact</a></li>
</ul>


<iFrame id="content" name="content" style="background-  color:#EEEEEE;float:left;">
<div style="clear:both;"></div>
</div> 

</body>
</html>
于 2012-12-24T22:12:54.533 回答