Question

我有疑问......我正在编写简单的html页面，只需要一点点css。在IE浏览器中，一切看起来都不错，但如果我使用chrome启动它 - 菜单和My 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中没有...是否有任何gerenal规则如何解决它？

我的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>

Fiddle of this code

Answer 1

如果您将iframe宽度的宽度缩小到79％，它就会并行。

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

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

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

示例jsfiddle with width: 79%或示例jsfiddle with border: 0

另外在旁注中我认为你搞砸了你的代码：

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

我想你想说：

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

Answer 2

取出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>

HTML页面“元素”的html和css定位

2 个答案: