2011-09-19 10 views
15

モバイルデバイスでは、すべてのリンクのクリック可能な領域を大きくするために、ウェブサイトを変更する必要があります。私はすべてのリンクに透明なborderと、同じサイズの負のmarginを与え、テキストフローに影響を与えませんでした。これは魅力のように機能します。しかし、背景を持つ要素ではありません。背景は透明な境界に広がります。これは、すべてのブラウザ間で一貫性があるような動作シームです。ここボーダーの下の背景を非表示にする方法

http://jsfiddle.net/hq65C/1/他の例:http://jsfiddle.net/DytDA/

これはなぜですか?私はいつも境界が要素の外側にあると考えていました。どのように私はこれを修正することができます。 (私はHTMLを変更する必要のないソリューションが必要です)。

答えて

30

background-clip: padding-box;

Demo

+0

これは私が探していた解決策です、ありがとうございます。たぶんこのリンクをあなたのソリューションに追加して、完璧にしたいと思うかもしれません;)http://jsfiddle.net/meo/DytDA/1/ – meo

+0

すばらしい、ありがとう。それはあまりにも良いサポートを持っています(IE9 +):https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#Browser_compatibility –

0

私は国境が要素外であった場合は背景画像が繰り返されていない場合、あなたは遅れている行動は、(国境をクリックすると、要素内をクリックとして動作していること)

いずれも動作しないだろうと思いますバックグラウンド位置xの位置を境界幅と同じ量に設定することができます。他に、あなたはまた、要素の後ろの色と同じにボーダー色を設定してみてくださいすることができますが、それが画像であれば、幸運

+0

おかげではなく、背景画像がスプライトであるので、私は本当に、他のソリューションが必要です。 – meo

0

CSS backgroundは、このオーバーborder-colorレイヤーで、borderの領域を塗りつぶします。

透明なので、borderの後ろにbackground-colorと表示されています。

プレーンHTML/CSSでは、これを回避する手段がないとは思っていません。

このjsFiddleはこれをdemostrates:

<a href="#"><span style="background: red">link</span></a> test test test <br/> 
test test test 

は予告:スパンは別のスタイル(他のCSS値)とインライン要素を意味

http://jsfiddle.net/hq65C/8/

+0

okバックグラウンドの位置は変わらないが、バックグラウンドの詳細が表示されます。http://jsfiddle.net/DytDA/:/ – meo

+0

これは、赤がそれをカバーしていないためです。それは最初のアンカーの赤の後ろにあります。申し訳ありませんが、あなたはHTML/CSSだけで何を達成できるのか分かりません。私の質問に書いたように、おそらく – Curt

0

はこれを試してみてください。他のdivは新しいブロックを強制します。

+0

のjavascript/jqueryの解決策があるかもしれません.DOMを変更することはオプションではありません。 – meo

関連する問題