html頁面“元素”的html和css定位

Question

我有問題...我用一點點CSS編寫簡單的html頁面。 在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中則不行....是否有任何通用規則可以解決？

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

這段代碼的小提琴

Answer 1

如果您將iframe寬度的寬度縮小到79％，那就很順手了。

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

另外，您也可以刪除iframe的邊框，並保持80％的寬度：

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

寬度為79％的示例jsfiddle或邊框為0的示例jsfiddle

另外，我認為您在這里弄亂了代碼：

<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 個解決方案

解決方案1
1 已采納 2012-12-24 21:53:22

解決方案2
0 2012-12-24 22:12:54

html頁面“元素”的html和css定位

問題描述

2 個解決方案

解決方案1 1 已采納 2012-12-24 21:53:22

解決方案2 0 2012-12-24 22:12:54

解決方案1
1 已采納 2012-12-24 21:53:22

解決方案2
0 2012-12-24 22:12:54