0

画面が@media（mobile〜）の幅に縮小されたときに、右上にあるTwitterブートストラップアイコンのようなオプションアイコンを作成しようとしています。少しリバースエンジニアリングを行い、ChromeとSafariでアイコンを再作成することができました。ただし、Firefoxでは少し異なり、IE8では大幅に異なります。

さまざまなブラウザの画像

これを修正するためのヘルプを探しています。

HTML：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="optionspanel.css" />
</head>
<body>
  <ul id="nav">
    <li>
      <button type="button" class="fw-opt-panel">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a id="optionsicon" href="#" class="selected"></a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
</ul>
<div class="clear"></div>

</body>
</html>

CSS：

.fw-opt-panel {
  background-color: rgb(14, 14, 14);
  background-image: -webkit-linear-gradient(top, rgb(21, 21, 21), rgb(4, 4, 4));
  border-bottom-color: rgba(0, 0, 0, 0.247059);
  border-radius: 4px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.0980392);
  border-width: 1px;
  border-top-width: 1px;
  box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.0745098) 0px 1px 0px 0px;
  cursor: pointer;
  float: right;
  padding: 7px;
}

.icon-bar {
  background-color: rgb(245, 245, 245);
  border-radius: 1px;
  cursor: pointer;
  display: block;
  height: 2px;
  margin-top: 3px;
  width: 18px;  
}
4

2 に答える 2

1

別の方法は、トリプルバーUnicode文字-☰（U + 2630）を使用することです。Font AwesomeやEntypoなど、ブラウザ間の違いを修正するさまざまなアイコンフォントでも利用できます。

于 2012-12-03T20:15:57.900 に答える
0

IE 6-9は、半径、グラデーション、またはテキストシャドウを期待どおりに（またはまったく）レンダリングしません。

PIEを使用してみてください（ここのPIEの例を参照してください）。

Firefoxに関しても、グラデーションや半径を生成するときに指摘するのが好きです。webkitに加えて-moz-linear-gradientを使用します。

于 2012-12-03T20:12:49.893 に答える