0

ここに画像の説明を入力大きなアイコンを使用すると、アイコン領域の周囲に境界線が表示されます。

I have tried: 
.ui-icon {
border: none;
}

それは解決策ではありませんでした。何かアイデアはありますか、それとも正しい方向に私を向けることができますか?

<head>
<style type="text/css">
<!--
.ui-icon-green5{
background-image: url(green_05_64x64.png);
}
.ui-icon {
background-color: transparent;
width: 64px;
height: 64px;
border: none;
margin-top:150px;
margin-left:150px;
}

a{
    line-height: 600px; 
 }
-->
</head>
<body>
<div id="content2" style="background-color:#000000;height:400px;width:400px;float:left;">
        <a data-theme="a" id="start-button" data-iconpos="top" data-icon="green5"
          data-role="button"
          href="index.html"
          data-corners="false">LIVINGROOM</a>
      </div>
</body>
4

3 に答える 3

1

試す

.ui-icon {
   border: 0 !important;
}

それが機能しない場合、境界線はpng自体にある必要があります

于 2012-08-08T21:35:43.813 に答える
0

-webkit-box-shadow: なし;

これで問題は解決します。ここに画像の説明を入力

于 2012-08-09T06:54:15.867 に答える
0

この問題の原因は完全にはわかりません。境界線だけでなく、アウトラインもなしに設定する価値があるかもしれません. chrome などの一部のブラウザーでは、これを使用して要素のフォーカスを示す場合があります (ただし、リンクで発生するのを見たことは覚えていませんが、入力フィールドでのみ発生します)。チェックする価値があるかもしれないもう 1 つのことは、これが実際に画像のアーティファクトではないかどうかです。誤ってスライスした可能性がある場合は、端が白くフェードしている可能性があります。Photoshop のようなプログラムで黒い背景の上に置くと、これがすぐに表示されます。

また、このすべてのデータ属性が何のためにあるのかわかりません。使用している jQuery プラグインと関係があるとします。とにかく、あなたのリンクに ui-icon のクラスを設定して、現在のスニペットからは言えないように、 border: none (および Outline: none ) が確実に適用されるようにします。

于 2012-08-08T21:35:56.150 に答える