2

FirefoxとChromeで発生するトップマージンの問題を誰かが修正できますか...両方のブラウザで2ピクセルのマージンを修正する必要があります...ChromeとFirefoxで同じことを確認してください...

ここにリンクがあります...

.smalCopybtn{float:left;text-decoration: none;color: #23699A;border: solid 1px #ccc;background-color: #ddd;background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
background-image: -moz-linear-gradient(top,  #ffffff,#dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
font:normal 11px Arial, Helvetica, sans-serif;-webkit-border-radius: 2px; -moz-border-radius:2px;border-radius:2px; padding:2px 4px 2px 4px;}

.mleft5{margin-left:5px;}
.dvleft{float:left;}

.txtbx2{padding:2px;font-size:11px; border:solid 1px #c4c4c4;outline:none;transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;border-radius:2px;
-webkit-border-radius:2px;-moz-border-radius:2px; box-shadow:0 1px 6px rgba(0,0,0,.1) inset;-webkit-box-shadow:0 1px 6px rgba(0,0,0,.1) inset;-moz-box-shadow:0 1px 6px rgba(0,0,0,.1) inset}

a{text-decoration:none;color:#23699a;outline:none; cursor:pointer;}a:hover{text-decoration:underline;}


<span class="dvleft mleft5">
<input class="txtbx2" type="text" value="test value here" style="width: 280px" >
</span>
<a class="smalCopybtn" style="margin-left:-2px; margin-top:2px;">
<span style="padding-left:1px;">Copy</span>
</a>
4

4 に答える 4

2

アンカーリンクから削除margin-top:2px;

ライブデモ

------

あなたはこれを書きます

<a class="smalCopybtn" style="margin-left:-2px; margin-top:2px;">

削除する margin-top:2px;

-----------

またはこれを追加

.txtbx2{
vertical-align:top;
}

更新されたデモ

于 2012-12-04T06:25:15.310 に答える
1

ボタンが 2px 下にシフトしたことについて質問している場合は、ここに解決策があります。

CSS で、smalCopybtn の float を削除します。これが問題の原因でした。

Float はタグを display:block に変換しましたが、インラインで表示する必要があります。

float とその効果の詳細については、参照してください。

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

于 2012-12-04T06:25:48.693 に答える
0

Rajivs のソリューションは機能します -- float:leftCSS から を削除します。
または
(キャロルのソリューション) a 内にアンカーを含めます<span> </span>。! ちなみに、アンカーを含めると<p> </p> 機能しません!

Firefox、Chrome、Safari でテスト済み。

于 2012-12-04T06:38:49.937 に答える
0

<a>タグが a<p>または div または span または何かの中にないのはなぜですか?

于 2012-12-04T06:23:52.233 に答える