Question

如果我执行以下操作，我会注意到<input type='image' />将边框添加到输入中，这是有道理的，因为您希望图像适合。但是查看顶部的空格，看起来这是一个错误。

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

从<input type='image' />进行简单的更改后，它按预期工作。不能成为白色空间。它已被删除。

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

这是另一种我不完全理解的行为。

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

我所做的只是在font上设置了#to_cart。由于默认字体大小更小，为什么#paypal现在是顶部的像素或2？小字体的半导体不会更少吗？

我可以做一些工作，这不是问题。我真的只是想了解为什么我的第一个和最后一个例子表现出这种奇怪的，混乱的行为。什么是逻辑？非常感谢任何帮助。

Answer 1

您需要使您的输入浮动以在行中对齐。只需更改你的CSS：

#paypal, #to_cart {
height: 62px;
background: #eee;
border: 2px solid #007;
border-radius: 30px;
float: left;
}

Answer 2

每个浏览器都为某些元素提供某种默认实现，就像你的情况一样，因为浏览器提供了默认样式......

<强>输入=＆＃34;按钮＆＃34;

<强>输入=＆＃34;图像＆＃34;

请注意1px padding加top至bottom和input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button { padding: 1px 6px; }，因为您可以通过渲染浏览器引擎来显示默认外观规则。

input="button"

在这里，您可以看到浏览器为input="image"应用了添加填充，但function getInputDateFormat(date) { return date.toISOString().split('T')[0]; } function validDate() { var today = new Date(); var maxDate = new Date(); maxDate.setDate(maxDate.getDate() + 7); document.getElementsByName("date")[0].setAttribute('min', getInputDateFormat(today)); document.getElementsByName("date")[0].setAttribute('max', getInputDateFormat(maxDate)); }

不存在相同的填充

More about appearance

<input type =“image”/>和<input type =“button”/>上的奇怪CSS行为

2 个答案: