0
私が次のことを行うと、<input type='image' />が入力に罫線を追加することに気付きました。フィットする画像。しかし、上部のスペースを確認してください、それはバグのようです。 <input type='image' />からの簡単な変更が予想通りに機能した後<input type = 'image' />と<input type = 'button' />の奇妙なCSSの動作
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
background:#eee; border:2px solid #007; font:bold 20px Arial, Helvetica, sans-serif; border-radius:30px;
}
#to_cart{
width:200px; height:64px;
}
#paypal{
width:306px; height:60px;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' alt='PayPal - The safer, easier way to pay online!' type='image' src='https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png' /></div>
</div>
</body>
</html>。空白にすることはできません。削除されました。ここで
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px; font:bold 20px Arial, Helvetica, sans-serif; padding:0;
}
#to_cart{
width:200px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>私は完全には理解していない別の動作です。
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart{
width:200px; font:bold 20px Arial, Helvetica, sans-serif;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>#to_cartに
fontを設定したすべてのでした。デフォルトのfont-sizeはさらに小さいので、
#paypalはなぜピクセルか2の上から来るのですか？より小さなフォントで半分をリードすることは少なくないでしょうか？
私は回避することができますが、それは問題ではありません。私は本当に最初の例と最後の例がこの奇妙で混沌とした振る舞いを示す理由を理解しようとしています。論理は何ですか？どんな助けでも大歓迎です。
ために存在して見ることができます
、どのようなスペース、あなたが話しているの？ –
'Run code snippet'ボタンを押しましたか？それははっきりしているはずです。 – PHPglue
質問をより明確にするために、彼は 'type =" button "'と 'type =" image "'を互いに隣り合わせて整列しようとしています。 – user3284463