Html IE中的按钮样式_Html_Css_Internet Explorer

Html IE中的按钮样式

html css internet-explorer

Html IE中的按钮样式,html,css,internet-explorer,Html,Css,Internet Explorer,我注意到IE有时在按钮文本周围有很大的填充。它似乎与按钮的文本量成正比。这使得按钮非常难看由于国际化问题，我不太愿意制作固定宽度的按钮。宽度百分比也是如此人们是如何处理像按钮这样的div样式的短缺的？这里有一个适合我的解决方案： <!--[if IE]> <style type="text/css"> input { overflow: visible; padding-left:2px; padding-right:2px; } </styl

我注意到IE有时在按钮文本周围有很大的填充。它似乎与按钮的文本量成正比。这使得按钮非常难看

由于国际化问题，我不太愿意制作固定宽度的按钮。宽度百分比也是如此

人们是如何处理像按钮这样的div样式的短缺的？

这里有一个适合我的解决方案：

<!--[if IE]>
<style type="text/css">

input { 
  overflow: visible;
  padding-left:2px;
  padding-right:2px;
}

</style>
<![endif]-->

在你发布这个问题之前，我从未注意到这一点，但你是对的。按钮上的填充量似乎是文本长度的“百分比”，这意味着当您向按钮添加更多文本时，它会变得更宽

如果只是要调整其行为的按钮，则此操作有效：

input[type='button'] {
    overflow: visible;
}

您不需要设置此条件，因为它不会影响其他浏览器中的按钮显示。您可以将规则更改为“提交”以及“按钮”。这将完全删除自动psuedo填充，并允许您添加自己的样式规则。

我将通过CSS调整按钮的填充

输入{

填充：0；}

删除填充将限制按钮大小以适应内容。

请确保将此doctype添加到页面顶部，并且它将不再执行此操作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

您可以在这里详细了解它的作用：但基本上它会告诉页面您要使用哪种HTML。

这就是诀窍：

input[type='button'], input[type='submit'] { overflow: visible; }
/* add above also your desired button padding if you want. */

供参考：

如果你想，你不必使用IE conditonal注释，因为这个CSS不会干扰其他浏览器上按钮的显示方式

在IE7上可以工作，但IE6不支持

[type='…']

选择器，因此它将忽略此样式。对于IE6来说，唯一的解决方法是对每个按钮应用一个类，并为此类添加相同的CSS

{overflow:visible；}

IE8不再需要这个了，因为他们最终解决了这个问题

我没有IE可供试验（因此是评论而不是回答），但您是否尝试过使用重置样式表覆盖所有默认设置，然后自己定义填充？不，设置填充只会增加内容：P太糟糕了。我的印象是IE6不支持这些类型的选择器（其中包含属性值）。我错了吗？嗯，IE6在问题中没有得到具体提及。这不起作用，正如我在评论中提到的，这会给已经存在的内容添加额外的填充，但这肯定不是（X）HTML规范之间的区别，而是浏览器决定使用怪癖模式还是（其尝试）标准模式。请参阅@Bertime:DOCTYPE和怪癖/标准模式与IE6和IE7在按钮文本周围添加的填充无关。即使在标准模式下，甚至使用严格的DOCTYPE，IE6和IE7仍然会在按钮文本周围添加更多填充。