0

plsは助けます!!!

CSS：

body
{
 margin: 0px;
 padding: 0px;
}

body #header {

     width:100%;
     clear:both;
     height:90px;
     /*overflow:hidden*/;
     box-shadow: 1px 0px 10px 2px #000;
     } 

body #header #h_l {
   width: 30%;
  height: 90px;
background-image: linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%);
background-image: -o-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%);
background-image: -moz-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%);
background-image: -webkit-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%);
background-image: -ms-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #e1e1e1), color-stop(99%, #9d9d9d)); /* Safari 4+, Chrome 2+ */  


 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e1e1', endColorstr='#9d9d9d'); /* IE6 & IE7 */  
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e1e1', endColorstr='#9d9d9d')"; /* IE8+ */  


background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.40, #e1e1e1),
    color-stop(0.99, #9d9d9d)
);
 float:left;
}

body #header #h_l #logo {

    float: right;
  /*-ms-interpolation-mode:bicubic; */
    max-width: 100%;
    width: auto\9; /* ie8 */ 
}

body #header #h_r {
   width: 70%;
  height: 90px;
background: #747474;

  float: right;
}

body #header #h_r #menu {

    position: relative;
    left: -50px;
    float:left;
  /*-ms-interpolation-mode:bicubic; */
    max-width: 100%;
    width: auto\9; /* ie8 */ 
  }

HTML：

<body >

    <div id="header">

    <div id="h_l">

        <img id="logo"  title="logo" alt="logo" src="{HTTP}{WEBSITE}/images/newlook/MM/logo_plus100px_right.png" >
    </div>
    <div id="h_r">
        <span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Home_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Solutions_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Support_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Company_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Contact_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Blog_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Reseller_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Apps_but.png" ></span>
    </div>

    </div>
</body>

ブラウザウィンドウのサイズ変更で、右側のメニューの要素が1つずつ新しい行に表示されるのはなぜですか？ブラウザウィンドウのサイズ変更時に（メニュー全体が完全なブロックであるかのように）、それを停止して、左側の画像のようにサイズ変更できるようにするにはどうすればよいですか？CSSで実行できますか、それともJavaScriptを作成する必要がありますか？答えてくれた人に感謝します！

4

1 に答える 1

0

実際の画像がないと、ここで何を達成しようとしているのかを理解するのは簡単ではありません。ここであなたのケースを再現しました：

http://jsfiddle.net/gVQ8x/1/

ここで幅のパーセンテージを設定しました (何のための-ms-interpolation-modeパーツですか?):

body #header #h_r #menu {
    position: relative;
    left: -50px;
    float:left;
  /*-ms-interpolation-mode:bicubic; */
    max-width: 100%;
    width: 6%; /* was auto\9 */
}

IE ハックを使用しないことを強くお勧めします。代わりに条件付きクラスを試してください: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

将来的に問題を引き起こす可能性があるもう 1 つの重要な問題は、ドキュメント内に同じ ID、つまり前述の を共有する複数の要素があることですbody #header #h_r #menu。JavaScript DOM 操作を適切かつ予測どおりに動作させるには、id を一意にする必要があります。

于 2012-07-05T18:24:30.197 に答える