文字のレイアウト。 再びバグ

Eva Galeslootによる画像



こんにちは



まず第一に、mail.ruと、アンドレイ・スミン、AndrewSuminに、フラッシュで書かれた投稿について謝罪したいと思います。 文字の組版の問題はかなり苦痛でしたが、一部の場所ではすべてが思ったほど悪くはありませんでした。 問題もあります。



mail.ruに関しては、現時点ではほとんど苦情はありません。 このwebmordでメールを入力するのは、Google Mailと同じくらいいいです。 ロシアのウェブモールが背景画像をサポートし始めたことを見るのはとてもうれしいです。



本当に何が欠けているか知っていますか? 電子メールクライアントおよびwebmordsの開発者からのFichlista。 どの機能が流通に導入され、逆にどの機能がカットされたのかを直接知ることは非常に良いことです。 これにより、レイアウト設計者の頭痛が解消され、ユーザーは曲がった文字の受信を停止します。 はい、これは非常に重要な情報です。



以下は、電子メールを準備する際に考慮すべきいくつかの新しいバグであり、開発者はそれらを閉じる必要があります。



Mail.ru



私が言ったように、これらの人はすべて、1つの小さなBUTを除いて素晴らしいです。 文字にテキスト(電話番号)で電話番号を指定すると、この同じ番号が青色の擬似リンクに変換され、クリックするとmail.ru Webエージェントを介して電話がかけられます。

<span class="js-phone-number highlight-phone" title="  -">+7(952)123 45 67</span>
      
      





すべてがうまくいきますが、それをスタイリングする方法は大きな問題です。 ここでは、Hederスタイルは役に立ちません。



Yandexメール



さらに多くの障害があります。 順番に:



1.テーブルフレーム



 <table width="400" cellpadding="0" cellspacing="0" style="border-collpase:collapse;"> <tr> <td width="50%" style="border-bottom:#999999 1px dashed;"></td> <td width="50%"></td> </tr> </table>
      
      





私たちは何を期待していますか? すべてがシンプルです。 テーブルの左のセルには、破線の下の境界線が表示されます。 私たちは本当に何を得ますか? 左のセルには実線の境界線が表示され、右のセルには破線が表示されます。 なんで? はっきりしない。



2.行の高さレイアウトボタンの例を示します。

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important;" href="#"></a></td> </tr> </table>
      
      





I.メールを除くすべてのメーラーは、意図したとおりにボタンを解析します。 私たちのヒーローの場合、ラインの高さは大幅に過大評価されます。 問題は、I。mailのデフォルトの行の高さが最初は大きく設定されていたことです。

 .b-message-body { line-height: 1.4; }
      
      





ブラウザで受け入れられている(1.2em)。 しかし、ここではそれほど単純ではありません。

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important; line-height:1.2em;" href="#"></a></td> </tr> </table>
      
      





問題を解決しません。 そしてそれは動作します:

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td style="line-height:1.2em;"><a style="color:white !important;" href="#"></a></td> </tr> </table>
      
      







3.セル間隔

ここではすべてがより興味深いものです。 以前は、i.mailのこの属性は曲がって機能していました。 テーブルが崩れた。 開発者は非常に興味深いことをしました:)彼らは次のようにそれを止めました:

 .b-message-body__content TABLE { border-collapse: collapse; }
      
      





これは非常にクールですが、解決策は悪いです。 セル間のパディングが必要ない場合は、cellspacing =“ 0”を指定するだけで問題ありません。 しかし、そこにありました。 マイクロソフトのスタッフはいつものように特別です。 テーブルのセル間の1ピクセルのギャップを避けるために、テーブルを折りたたむ必要があるのはデスクトップの外観です。 そのため、メールの開発者に「この誤解を修正してください」という説得力のある要求があります。 この投稿がRoman Komarov kizu (tk)に気づかれたら嬉しいです。 私はこれらの問題について彼に連絡できませんでした。



人生のささいなこと



上記の開発者へのリクエストは次のとおりです。少なくともリンクのヘッダースタイルのサポートを導入してもらえますか? 擬似クラス:: link ,: hover ,: visitが与えられた場合。 事実、手紙のリンクは死んでいるように見えます。 リンクの上にカーソルを置いたときにリンクの色を変更したり、テキストの装飾を削除したりするのは素晴らしいことです。



そしてもう1つの詳細。 css max-widthプロパティはどうですか? 主にmedia_queriesを記述する必要があるのは主にその不在のためです。



ありがとう、私にはすべてがあります。



All Articles