です。 Habrエディターは単に別の属性を提供しないため、一...">
Clever Geek Handbook

「バグ」-属性align = centerを使用した非センタリング図面の非バグ

ご存じのように、Habrは「古い学校」のタグ属性を使用して、記事内のテキストと画像のフォーマットと著者によるコメントを許可します。 これらのタグの中には、W3C標準にないものがありました。 これは<img align = "center">です。 Habrエディターは単に別の属性を提供しないため、一部の著者は「単純に」この属性を使用することがわかりました。 奇妙なことに、一部のブラウザーではこの属性がHabréでサポートされていますが、クリーンなテストページでの実験では奇跡は見られませんが、imgでは機能しません。



どの場合に属性がサポートされ、どこでサポートされるようにスタイルに追加する必要があるのか​​という質問に興味がありました。 これがサイトで機能する場合、これが正しい属性であるという素朴な意見を支持しますが、それにもかかわらず、図面をセンタリングするツールを入手します。



実際、HTMLのalign = "center"属性はブロック要素（div、p、...）を対象としており、それらを参照するのではなく、要素の内部コンテンツを参照します。 したがって、次のように書くと 

<p align="center"><img src="123.gif"/></p>
次に、センタリングが機能します（これは、alt = " pic-sub-test "の図面とともにテストページに表示されます）。



ただし、Habréには記述できません。これらはタグパーサーのルールです。



これがHabréでどのように機能するかを確認するには、コメントを書くとき、またはドラフト記事でプレビューを使用できます。 これは最終的な外観と完全には一致しませんが、テストに使用できます。 

 <div align="center"><img src="1450823006127547032299"/></div> <img align="center" src="1450823006127547032299"/>


表示される内容は次のとおりです。











Firefoxを除くほとんどのブラウザでは、2番目の画像が中央に配置されます（Habrのスタイルがまだ修正されていない場合）。ただし、 テストではこの属性がブラウザでサポートされていないことが示されます（Doctypeのまれな例外を除く）。

この間違ったテキストはどこでも機能しないのに、FirefoxではなくHabréで機能するのはなぜですか？



UPD 1月25日 2013 （1年後）： Habrのスタイルがこの誤った属性をサポートしなくなったことが判明しました。 サイトで使用するには、Firefoxで行う前と同じ方法でユーザースタイルを追加する必要がありました。



描画スタイルを見ると、その理由がわかります。 

 img[align="center"] { display: block; margin: 0 auto !important; }


はい、all.cssファイルのHabréでは、間違った属性を「正しい」に変換するこのフェイントがサポートされています。 これらのプロパティを使用して、中央揃えを開始するために画像を作成する必要があります- マージンスタイルによってブロックおよび中央になります：0 auto; 。



（しかし、そのような属性がないことを知っている人は、それがHabréで動作することを推測できません-ドキュメントがなく、Fxでのテストは合格しません。たとえば、 メモで aleksandrIt各アノテーションで）Chromeを通して見て。）



Firefoxでセンタリングが機能しない理由はまだ理解されていません。



ポイントは小さい-スタイルも見てください（Firebugを使用）。 ここでは、属性がalign = "middle"に奇跡的に変更され、手動で名前を変更しても修正に役立たないことがわかります。 彼自身の意見では、ブラウザー自体が間違った属性を最も適切な属性（行要素のストリーム内の垂直方向の配置）に変更します。 したがって、スタイルルールimg [align = "center"]は機能しなくなります。



したがって、Habréでの完全なブラウザーサポートには、ルールがありません。 

 img[align="center"], img[align="middle"]{ display: block; margin: 0 auto !important; }




属性を使用して空白ページをテストする



さまざまなブラウザーでimg align =“ center”属性を確認するためのテストページを表示するには、 smbbt.kodingen.com / habrahabr / testImgAlignCenter.htmにアクセスしてください 。 Firefoxでは、このように表示されますが、他のブラウザーではわずかに異なります。 写真とブロックは、区別しやすいように色付けされています。 ALTに署名を見るための実際の写真はありません。







最初に、「基本テスト」という碑文の下に、青みがかったブロック「 空の図 」があり、目的の属性と完全に論理的な属性が画像で失敗します。

[修正スタイルを有効にする]リンクを1回クリックするだけで、受け取ったスタイルルールの適用を確認できるため、すべてのブラウザーでセンタリングが機能し始めます。



テクニカルノート。 addRules（）スタイル関数の外観は、IE8ブラウザーにスクリプトを含めたいという要望が原因です。 （IE9ではテストされていませんが、残りのように機能するはずです。）doctypeがなければ、margin：0 autoルールはIE8では機能しませんが、align：rightおよびleft属性は機能します。



どうする



このようなルールは、Habr ZenCommentスタイルのエラーとHabrAjaxスクリプト（Habr-adjax） のエラーを修正するために特別に記述され、その後、すべてのブラウザーでalign = "center"属性によるセンタリングが正しく機能し始めました。



一般的な結論については 、この属性がIMGタグで機能するというウェブマスターの間での意見を支持すべきでないと言わなければなりません。 属性の時代が過ぎて、誰もがスタイルを使用しているとしましょう。経験の浅いWebビルダーの中には、そのような属性が存在するという意見にfallする人もいます。



UPD 1月25日 2013 （1年後）： Habrのスタイルがこの誤った属性をサポートしなくなったことが判明しました。 サイトで使用するには、Firefoxで行う前と同じ方法でユーザースタイルを追加する必要がありました。


More articles:


All Articles