0

Firefoxでサイトを開くと、ブラックボックスにimg alt属性が表示されます（添付の画像を参照）。ほんの一瞬だけ表示され、画像の読み込みが開始されると消えてしまいます。

これを削除したい。

ここに画像の説明を入力してください

これは私のHTMLコードです

<a href="url"><img alt="alt text" width="650" height="241" src="src url" /></a>

Firefoxでのみ表示されます。

私はこのcssコードを使用してみました

a img {
    border: 0;
}

しかし、これは役に立ちませんでした。

どうすればこれを削除できますか？

4

2 に答える 2

7

短い答えは、できないということです。より長い答えは、すべきではないということです。

あなたは完全に間違った方法でこれに取り組んでいます。ALT予想通り、この時代では、タグ属性が存在する理由や、Firefox が画像をレンダリングする前に境界線を気にする理由を考えることはあまりありません。しかし、Web デザインに真剣に取り組みたいのであれば、これらのことを知っておく必要があります。彼らは理由があってそこにいます。それは、人はそれぞれ異なり、ユーザー エージェントも異なるためです。画像をそれほどよく見ることさえできない人もいますが、ピクセル コンテンツを十分に識別できないスクリーン リーダーによってページ コンテンツを読んだり、読み上げられたりする人もいます。また、一部のシナリオ (学術、科学) では、ユーザー エージェントは画像を無視し、代わりにテキスト コンテンツに焦点を当てて ALT コンテンツのみを表示するように構成されています。

上記を考慮に入れると、これらの事実に基づいて決定を下すことができます - あなたのイメージは実際に何をしますか? ユーザーがそれを見ることは重要ですか？それが実際にその中心にある画像である場合は、ユーザーにどのように表示されるかを気にする必要はありません。安心してください。ユーザーはそれを見て、うまくいけば幸せになるでしょう。

この要素は、スタイルの一部ではなく、提供するドキュメントのコンテンツIMGの一部である画像ベースのデータ用です。これは絶対に必要な知識であり、多くの人が思いもよらないことです。区切り記号、要素の前のハイパーリンク アイコン、ページ上部の巨大なバナー、フォームのボタン - これらはすべてコンテンツの一部ではなく、読者に意味をもたらすことはめったにありません。それだけで、代わりに CSS などを使用してこれらを配置する必要があるかどうかが決まります。写真、絵、ロゴ、イラストなどの要素を使用します。AIMG

言い換えれば、それが Web ページ デザインの装飾的な部分である場合は、代わりに背景画像で十分かどうかを検討する必要があります。これにより、境界線と ALT の問題も完全に解消されます。できることはこれだけです - CSS は、境界線が好きではないという理由だけ で、ページのユーザーのアクセシビリティを奪うことはありませんし、すべきでもありません。覚えておいてください - あなたのウェブページはあなたのウェブページではありません、それらはユーザーによって表示されます。同じことがユーザー エージェントにも当てはまります。あなた自身が国境を好むかどうかは、彼らにとってほとんど価値も関心もありません。それらを最大限に活用する可能性を彼らに与えてください。グラフィック デザインは間接的に妥協を意味します。私たちは、彼らの選択や好みを尊重しながら、私たちが利用できる方法を使用して、私たちが選択したメッセージをより適切に伝えたいと考えています。ウェブデザインは、これがナイフの刃の上を歩くためです。

<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
    Tree hugging, anyone?
</div>
于 2012-09-18T12:17:22.843 に答える
0

私はそれが古い質問であることを知っていますが、これは疑似要素を使用した CSS のみのソリューションを使用した 2017 年の更新です。

img:after {  
  content: attr(alt);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
 <img src="//placehold.foo/200x200" alt="Remove border from this alt text" />

于 2017-07-09T21:49:43.780 に答える