どうもこんにちは！「不可解な謎現象を勝手に引き起こし、精神的な負担と工数を増やし、モチベーションを下げてあげるよ！」でおなじみ、みんな大好きＩＥちゃんです( ´▽｀)よろしくね！
「印刷の時だけボタン表示が乱れるのですが…」とクレームが来ました。
この画面を
印刷すると↓
実際に印刷したものをスキャンした画像が添付されており、確かに文字列「クエ」が印刷されているようでした。クエ…？そんなものを打った記憶もなく、レンダリング後のソースを表示してみても、「クエ」などという文字列は見つからず。必死に探しましたが見つからず…(´д｀)
普段は、個人的にめんどくさいサ イトを印刷することがないので、特に考えずにコーディングすることが多いのですが、「コーポレートなので印刷も重視するんだけど…」と後出しじゃんけんで言われまし た。このあたりを最初からヒアリングしておかない時点でアレなのですがｗ、得意の「知らんがな(´д｀)」というワケにもいかないので調査。
※要求が submit value=”” で、CSSで画像ボタンにするという仕様だったので、このような状況になってしまっています。
サンプルコード
<html> <body> <h1>サンプル</h1> <form> <input name="test" value="テスト文字列" /><br /> <h2>ボタン・value=""</h1> <input type="submit" value="" /><br /> <h2>ボタン・value="ばりゅー"</h2> <input type="submit" value="ばりゅー" /><br /> <h2>ボタン・value=""</h1> <input type="submit" value="" style="text-indent:-9999px;"/><br /> </form> </html>
テスト用なのでスーパー雑ですが、雰囲気は見て取れるかと。
結論を先に…。<input type=”submit” value=””> にすると、（印刷時に限り）「クエリ送信」という謎の文字列が付加される
印刷時に限り…って、頭湧いてるんじゃねえのか・・・というデバッガー泣かせな仕様のようで・・・当然のように知らなかった私は開眼しました。アクセシビリティを考慮した仕様なのでしょうか、だとしてもヒドいというか怖い(´д｀)
結論を知ったところで、上記ソースのレンダリング結果をそれぞれ確認してみましょう！
IE11―画面表示
普通、というか想定通りの表示です。これを印刷してみよう！
↓IE11―印刷プレビューをご覧下さい！
勝手にボタンに「クエリ送信」が付与されてる！なにそれこわい
念のため他の主要ブラウザもチェック
Chrome―画面表示
Chrome―印刷プレビュー
Firefox―画面表示
Firefox―印刷プレビュー
Chrome／Firefoxともに、想定通りの表示・印刷プレビューをしてくれました。
やはりIEのみの独自仕様？アクセシビリティ的なもの？規定があるのかな？
そもそもvalue=””にするなという話かも知れませんが、勝手に打った記憶のない文字列を挿入されるのは非常に気持ち悪く、往生しました…。
謎仕様「クエリ送信」を隠す解消策
場当たり的ですが、text-indent: -9999px をこっそり噛ませて
<input type=”submit” value=”” style=”text-indent: -9999px;” />
の記載にしたら、↓のようになりました。
ボタン幅が、「クエリ送信」の幅を取られてしまうかと思ったけれど、結果はご覧の通り…。どうなってるんかわからんけど、とりあえず急場はしのげたので、よしとします。(´д｀)
IEの懐の深さったら…
毎日が新発見。いつも勉強になります。また胸を貸して下さい！
偶然此方の記事に辿り着きましたが、IEにこんな謎仕様が…
「クエ…」ってなんだろってなってググって此方の記事に助けられる方がさぞ多いことでしょう
通りすがりさんこんばんは！コメントありがとうございます。
いまどきWebを印刷してチェックされる…というレアなケースでしたので、焦りました。
ペーパレス時代でいまさらこれに困るという状況はそうそう無いでしょうが、誰かの助けになっていれば書いた甲斐がありますｗ