SOの質問を使用しましたCSSで画像をグレー表示しますか? css を使用したリンクを無効に して、ボタンをグレー表示し、クリックを防止する css ラッパーを作成します。最初は別の css ファイルで試しましたが、この例ではインライン css スタイルを使用しており、同じ結果が得られます。ここに 4 つのボタンがあります。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<span style="opacity:0.4; pointer-events: none;">
<input type='submit' value='Span Inside' />
</span>
</form>
<form>
<div style="opacity:0.4; pointer-events: none;">
<input type='submit' value='Div Inside' />
</div>
</form>
<div style="opacity:0.4; pointer-events: none;">
<form>
<input type='submit' value='Div Outside' />
</form>
</div>
<span style="opacity:0.4; pointer-events: none;">
<form>
<input type='submit' value='Span Outside' />
</form>
</span>
</body>
</html>
この例の 4 つのボタンはすべて、Firefox 15.0.1、Safari 6.0、または Chrome 21.0.1180.89 のいずれのクリックにも応答しません。これは予想どおりです。
Firefox では、4 つのボタンすべてがグレー表示され、不透明度は 0.4 です。これは私が予想したとおりです。
Safari と Chrome では、最初の 3 つのボタンはグレー表示されますが、フォーム要素の外側にあるスパン要素を持つ 4 番目のボタンの不透明度は 1.0 です。
ブラウザにバグがありますか、それとも私の理解にあるのでしょうか?