テーブル境界iPadとiPhoneのHTML Eメールで -- iphone フィールド と html フィールド と ipad フィールド と email フィールド 関連 問題

Table borders in HTML email on iPad and iPhone












7
vote

問題

日本語

電子メールテストを実行するときにテーブル行の間を示すピクセル境界線を持っています。 iPhoneとiPadのみ。 私は試してみました:

<事前> <コード> * { margin:0; padding:0; }

私も試してみました: これは境界線を白ではなく青になりますが、私は境界線が完全に取り除かれたいですか?

英語

I have a pixel border showing between table rows when doing email testing. iPhone and iPad only. I have tried:

* { margin:0; padding:0;  } 

I have also tried: this makes the border blue instead of white but I want the border removed completely?

</div
           

回答リスト

8
 
vote

これはあなたが個々のテーブルセルに背景色や画像を適用したときに明らかに起こります。 MyStery国境を持つテーブルからの個々の<コード> background-color background-color の参照、および問題が解決されました。

ソース: iPhoneへの失敗:テーブルボーダーとHTML Eメール(キャンペーンモニタ)

 

This apparently happens when you've applied background colors or images to individual table cells. I removed individual bgcolor and background-color references from the tables with mystery borders, and the problem went away!

Source: iPhone fail: The trouble with table borders and HTML email (Campaign Monitor)

</div
 
 
   
   
3
 
vote

これを追加してみてください:

<事前> <コード> cf map-route0

これはズームインしないように停止します。これは機能しています。

<事前> <コード> cf map-route1

しかし、あなたがズームインすると、それは再び壊れたように見えます。最初の負荷がうまくいったので、私は2番目の選択肢に満足していました。

 

Try adding this:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> 

This will stop users from zooming in. I found this works too:

<meta content='width=device-width; initial-scale=1.0;' name='viewport' /> 

But, it looks broken again when you zoom in. Initial load worked, so I was happy with the second option.

</div
 
 
1
 
vote

追加を試してみてください:

<事前> <コード> cf map-route2

何が起こるのか見て

 

try adding:

border-collapse:collapse; 

see what happens

</div
 
 
     
     
1
 
vote

IOSの問題は、詳細については、 http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email

基本的には、テーブルセルには異なる背景色で関係があります。引用:

"これらの境界線がiPhoneに現れるのを防ぐために、あなたは試すことができます:

  • 個々のテーブル行とセルからの背景色や画像の取り外し、および/または;
  • 問題のあるテーブルを新しいテーブルにネストし、内部テーブルの背景色をフィーチャーします。 "
 

It's an issue in iOS, for more info see: http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email

Basically, it has to do with different background-colors for the table cells. To quote:

"To prevent these borders from appearing on the iPhone, you can try:

  • Removing background colors or images from individual table rows and cells, and/or;
  • Nesting the problematic table in a new table, featuring a background color that matches that of the inner table."
</div
 
 
 
 
1
 
vote

私はボックス影を使ってこれを解決します。私はそれがきれいではないがねえ、私たちはここにテーブルについて話しています:)

親ノードの色をIPADに表示されているTDにボックスシャドウを置くだけです。 iPad固有のメディアクエリ内のiPadに対してのみこれを実行できます。

 

I "solve" this using box-shadow. I know it's not pretty but hey, we're talking about tables here :)

Simply put a box-shadow to any TD having the parent node color showing up on iPad. You can even do this only for the iPad inside an iPad specific media query.

</div
 
 
 
 
0
 
vote
<事前> <コード> border: 0;

素敵で簡単なことをする

 
border: 0; 

should do it nice and easy

</div
 
 
     
     
0
 
vote

画像? style="display:block;" をimages

に追加
 

images? add style="display:block;" to images

</div
 
 
0
 
vote

包含テーブルの背景色を変更している間、1つのセクションでは、1つのセクションでは機能しませんでした。そこで、相対位置と-1(右側のセル上)の左の値を使用しました。サポートされている位置決めを見て(少なくともIOS 6.1)。否定的なマージンがうまくいっただろうと思います。

 

While changing the background color of the containing table worked for most parts of my layout, for one section, that wasn't an option. There I used relative positioning and a left value of -1 (on the right cell). I was surprised to see positioning supported (at least in iOS 6.1). I suppose a negative margin would have worked too.

</div
 
 
   
   
0
 
vote

私の場合は、背景ボックスが行の終わり前に終了し、前景ボックスが行の開始からインデントされた前に終了したボックスのように見えたテーブルを望んでいました。すべてのWebサイトを読んだ後、q / a、ここに提案され、最終的に働いていたすべての代替案を試していて、箱の影、例えばkを指定していました。:

 <コード> <table style="margin-right: auto; margin-left: auto; width: 100%;" cellspacing="0" cellpadding="3">    <tbody>      <tr>        <td colspan="4" style="width: 90%; background-color: navy;">          <span style="color: #ffffff;">Background Box Line 1</span>        </td>        <td style="width: 10%;">          &nbsp;        </td>      </tr>      <tr>        <td style="background-color: navy; width: 25%; box-shadow: 0px -1px 0px navy;">          <span style="color: #ffffff;">BG Box Line 2</span>        </td>        <td colspan="4" rowspan="2" style="background-color: red; width: 75%;">          Foreground Box Line 1<br>          Foreground Box Line 2        </td>      </tr>      <tr>        <td>          &nbsp;        </td>      </tr>    </tbody>  </table>  

私はiPhoneに現れる2つの "背景"ネイビーセルと<コード> box-shadow: 0px -1px 0px navy; の間の薄い水平方向のギャップ線を取り除く必要があり、<コード> box-shadow: 0px -1px 0px navy; を下のネイビーセルの上に薄いネイビー線を入れてくださいそしてそのようにして、上部海軍細胞と下の海軍細胞の間のその隙間があったものであった。

 

In my case I wanted a table that looked like overlapping boxes where the background box ended before the end of the row and the foreground box started indented from the start of the row. After reading every web site, Q/A, suggested here and trying every alternative what eventually worked was specifying a box-shadow, e.g.:

<table style="margin-right: auto; margin-left: auto; width: 100%;" cellspacing="0" cellpadding="3">    <tbody>      <tr>        <td colspan="4" style="width: 90%; background-color: navy;">          <span style="color: #ffffff;">Background Box Line 1</span>        </td>        <td style="width: 10%;">          &nbsp;        </td>      </tr>      <tr>        <td style="background-color: navy; width: 25%; box-shadow: 0px -1px 0px navy;">          <span style="color: #ffffff;">BG Box Line 2</span>        </td>        <td colspan="4" rowspan="2" style="background-color: red; width: 75%;">          Foreground Box Line 1<br>          Foreground Box Line 2        </td>      </tr>      <tr>        <td>          &nbsp;        </td>      </tr>    </tbody>  </table>

The line I had to get rid of was a thin horizontal gap line between the 2 "background" navy cells appearing on iPhones and the box-shadow: 0px -1px 0px navy; let me put a thin navy line above the bottom navy cell and so filled in what otherwise was that gap between the top and bottom navy cells.

</div
 
 

関連する質問

7  Gmailで数学を挿入するためのgreasemonkeyスクリプト  ( Greasemonkey script for inserting math in gmail ) 
私は数学的方程式をGmailで通信する簡単な方法を望みます。 asciimathというjavascript スクリプトは、tex-を翻訳する必要があります。式のように標準のMathMLへのように。 このスクリプトをGMで使用するのはうれしいと思いました。電...

3  SMTPのないDelphiで電子メールを送信し、サーバーでPHP機能を使用する  ( Sending email in delphi without smtp and using php function at server ) 
Delphiを使用して、Winsockを使用してWebサーバーにテキストメッセージを送信し、サーバー上のEメールPHP機能を使用してメッセージを投稿します。 最初に送信手順を完了しました(プロシージャーSendEmail):テキストファイル(ログ)を読み取り...

442  どのようにしてあなたがプログラムで送る電子メールがスパムとして自動的にマークされていないことを確認しますか?  ( How do you make sure email you send programmatically is not automatically marked ) 
これは難しいもので、私は常に許可に基づく電子メール(すなわち、あなたが送る許可がある人々にのみ送信しか送信しかない)や明らかに spamish 用語を使用していません。 遅く、私がプログラムを送信した電子メールのいくつかは自動的に人々のスパムフォルダにシャッ...

2  PHPフォームにフォームに入るには、連絡先フォームで使用されますか?  ( Php form email script to be used with contact forms ) 
私は無料/ OpenSource PHPフォームの電子メールスクリプト/クラスを探しています。主な要件は、PHP(論理)とHTMLとCSS(設計)が分離されていること、つまり、すべての種類の入力/フィールドを必要とし、スクリプトが自動的に処理を処理するようにフ...

3  Ubuntuで扱う方法は?  ( How to make mail work on ubuntu ) 
Ubuntuの新しいインストールを持って、phpのmail()関数を使用しようとしています。 関数は失敗します、私は私のインストールでパッケージを欠いていると思います。 ...

7  RFC822.AddressListの非推奨の同等のものはありますか?  ( Is there a non deprecated equivalent of rfc822 addresslist ) 
私は、rfc822.addresslistのようなものが必要です。言い換えて、メールの「宛先」ヘッダーフィールドの内容を個々のアドレスに必要です。 RFC822は電子メールパッケージを支持して推奨されているので、私はそこに似たものを探しましたが、何も見つけるこ...

19  PHPで安全なアクティブ化文字列を生成する方法  ( How to generate a secure activation string in php ) 
ユーザーが私のウェブサイトにメールを購読してください。私のウェブサイトは電子メールの確認を生成し、それらに送ります。電子メールの内容では、アクティベーションキーを含める必要があります。 www.domain.com/activate.php?key=$ Ge...

6  SharePoint Designerワークフローを通じて電子メールをBCCできますか?  ( Can i bcc an email through sharepoint designer workflow ) 
標準SharePoint 'Email'ワークフローアクティビティはBCCフィールドをサポートしていませんが、電子メールBCC'DをSharePointグループに送信する必要があります。 私はこれを提供するために2008年のvs 2008でカスタムワークフロー...

1  Symfony 1.31でメールを送信できません  ( Unable to send mail in symfony 1 31 ) 
私のアクションクラスで次の方法で電子メールを送信しようとしています: <事前> <コード> public function executeTestnewmail() { // send an email to the affiliate ...

6  PHPからHTML Eメールを送信する  ( Sending html email from php ) 
PHPから単純なHTML Eメールを送信しようとしています。以下のコードは、Gmailの空白の電子メールをもたらすだけです。それはまた「noname」と呼ばれる空の添付ファイルを持っています。これは私が欲しいもの全体ではありません。それは働いていないそれの症...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有