53

<input type='button'/>現在、次の CSS を使用して要素のスタイルを設定しています。

background: transparent url(someimage);
color: transparent;

valueボタンを画像として表示したいのですが、その上にテキストを表示したくありません。これは、Firefox では期待どおりに機能します。ただし、Internet Explorer 6 および Internet Explorer 7 では、引き続きテキストを表示できます。

テキストを非表示にするためにあらゆる種類のトリックを試しましたが、成功しませんでした。Internet Explorer を動作させるための解決策はありますか?

type=button(これは Drupal フォームであり、そのフォーム API はイメージ タイプをサポートしていないため、使用に制限があります。)

4

17 に答える 17

53

私が使う

button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0}  /* ie6 */
*+html button{font-size:0;display:block;line-height:0}  /* ie7 */
于 2009-06-22T11:21:34.947 に答える
35

私は反対の問題を抱えていました（Internet Explorerで動作しましたが、Firefoxでは動作しませんでした）。Internet Explorerの場合は左パディングを追加する必要があり、Firefoxの場合は透明色を追加する必要があります。したがって、16pxx16pxのアイコンボタンを組み合わせたソリューションは次のとおりです。

input.iconButton
{
    font-size: 1em;
    color: transparent; /* Fix for Firefox */
    border-style: none;
    border-width: 0;
    padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
    text-align: left;
    width: 16px;
    height: 16px;
    line-height: 1 !important;
    background: transparent url(../images/button.gif) no-repeat scroll 0 0;
    overflow: hidden;
    cursor: pointer;
}
于 2009-04-03T20:15:31.247 に答える
21

良い：

font-size: 0; line-height: 0;

私にとって素晴らしい仕事！

于 2009-06-22T08:37:09.070 に答える
9

text-indent プロパティを -999em などに設定してみましたか? これはテキストを「隠す」良い方法です。

または、font-size を 0 に設定することもできます。これも機能します。

http://www.productivedreams.com/ie-not-interpreting-text-indent-on-submit-buttons/

于 2009-03-01T20:39:46.897 に答える
6

なぜvalue属性をまったく含めているのですか？メモリから、指定する必要はありません (ただし、HTML 標準では指定する必要があるかもしれませんが、確かではありません)。属性が必要な場合はvalue、単に状態ではないのはなぜvalue=""ですか?

この方法を採用する場合、CSS には背景画像の高さと幅に関する追加のプロパティが必要になります。

于 2009-03-01T20:33:36.990 に答える
3

さまざまな IE で機能するソリューションと機能しないソリューションに見られる違いは、互換モードがオンまたはオフになっていることが原因である可能性があります。IE8 では、互換モードがオンになっていない限り、テキスト インデントは正常に機能します。互換モードがオンの場合、font-size と line-height でうまくいきますが、Firefox の表示が乱れる可能性があります。

したがって、CSS ハックを使用して、Firefox に ie ルールを無視させることができます。

text-indent:-9999px;
*font-size: 0px; line-height: 0;
于 2011-01-21T17:30:17.487 に答える
2

ボタンへの適用font-size: 0.1px;は、Firefox、Internet Explorer 6、Internet Explorer 7、および Safari で機能します。私が見つけた他のソリューションはどれも、すべてのブラウザーで機能しませんでした。

于 2009-05-12T16:43:40.627 に答える
2

私はこれをどこかからメモしました：

入力に ​​text-transform を追加して削除する

input.button {
    text-indent:-9999px;
    text-transform:capitalize;
}
于 2013-03-20T13:20:56.127 に答える
1

overflow:hiddenそしてpadding-left私のためにうまく働いています。

Firefox の場合:

width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;

IE の場合:

padding-left:1000px;
于 2009-09-28T14:21:29.780 に答える
1

これは、Firefox 3、Internet Explorer 8、Internet Explorer 8 互換モード、Opera、および Safari で機能します。

*注: これを含む表のセルには と がpadding:0ありtext-align:centerます。

background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;
于 2009-09-24T16:11:54.800 に答える
0 
color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */
于 2010-05-31T10:14:17.370 に答える
0

私はまったく同じ問題を抱えていました。そして、他の多くの投稿が報告したように、パディング トリックは IE でのみ機能します。

font-size:0pxまだいくつかの小さな点が表示されます。

私のために働いた唯一のことは、反対のことをすることです

font-size:999px

...しかし、25x25 ピクセルのボタンしかありませんでした。

于 2011-01-04T09:43:33.167 に答える
-1

color:transparent;そして、どのtext-transformプロパティもそのトリックを行います。

例えば：

color: transparent;
text-transform: uppercase;
于 2010-02-19T17:39:11.020 に答える