0

私は質問があります...iamは少しcssで簡単なhtmlページを書いています。IEではすべてが正常に見えますが、Chromeで起動すると、メニューとMy ContentPanel（iframe）が一致しません。

何をすればよいでしょうか？HTMLとCSSしか使えない

私のCSSコードの小さな断片：1。ボタンメニュー-20％

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

iframe-htmlページの2番目の要素の幅は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;
}

幅が79％のjsfiddleの例または境界線が0のjsfiddleの例

また、補足として、ここでコードを台無しにしたと思います。

<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 に答える