Chrome add-on only

Question

I get a weird addition in the h3 tag only in Chrome. The strangest thing is that I cannot prevent this or control it with CSS, and when I select the h3 text, it seems that the selection expands to the right and bottom of the text.

Preview in Chrome:

Preview in other browsers:

This add-on in Chrome causes misalignment, and it increases the size of the container, which is undesirable.

Here is the violin .

Could you help me find the problem?

Note. I use CSS reset, I tried line-height , margin instead of padding , but no luck.

Answer 1

Try adding line-height: 0; in the div:

 #mailing div { line-height: 0; } 

Try adding:

 #mailing .moduletable { display: table; } 

Updated jsfiddle: http://jsfiddle.net/BbJhE/12/

Answer 2

Although this may not be the best solution (because I had to hardcode the height of <div id="mailing"> ), it works and remains compatible with both Chrome and FF

I added height: 2.4em; in #mailing and margin:0; up to #user_email_formAcymailing1.inputbox

Fiddle: http://jsfiddle.net/BbJhE/11/

Answer 3

Try to delete:

 table.acymailing_form { margin-top: 2%; } 

Answer 4

Try setting a hard row height for h3:

 #mailing h3 { font:small-caps .95em"Times New Roman", Times, serif; letter-spacing:1px; text-transform:capitalize; text-shadow:0 1px 0 #fff; color:#6b6b6b; padding:10px; margin:0; float:left; line-height:20px; }