如何从Internet Explorer中的宽按钮中删除锯齿状边缘?例如:
答案 0 :(得分:5)
您还可以通过设置按钮上的background-color
和/或border-color
来消除Windows XP的按钮样式(以及所有其他版本的Windows)。
尝试以下样式:
background-color: black;
color: white;
border-color: red green blue yellow;
你当然可以让眼睛更加赏心悦目。但是你明白了我的观点:)
Stack Overflow使用这种方法。
答案 1 :(得分:4)
作为解决方法,您可以删除按钮两端的空白区域,这样可以减少锯齿状边缘。这是通过以下css和一些jQuery完成的:
input.button {
padding: 0 .25em;
width: 0; /* for IE only */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto;
}
$(function(){
$('input[type=button]').addClass('button');
});
jQuery用于添加按钮类。可以找到更深入的写作here。
答案 2 :(得分:2)
您可以使用CSS更改按钮的边框样式,如下所示:
/**************************************************************************
Nav Button format settings
**************************************************************************/
.navButtons
{
font-size: 9px;
font-family: Verdana, sans-serif;
width: 80;
height: 20;
position: relative;
border-style: solid;
border-width: 1;
}
答案 3 :(得分:2)
在按钮上设置overflow: visible;
将解决IE 6和7中的问题。
(见http://jehiah.cz/archive/button-width-in-ie)
在IE 6中,如果display:block;
也应用于该按钮,则上述修复将无效。
在IE 6中将按钮设置为display:inline;
将使修复工作正常。
如果在表格单元格中有这样的按钮,那么表格单元格将不会收缩到新的较小宽度的按钮。
您可以通过在按钮上设置width: 0;
来在IE 6中解决此问题。但是,在IE 7中,这将使除按钮文本之外的所有内容都消失。
(见http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie)
答案 4 :(得分:1)
你可以做的不多,但好消息是它已在IE8中修复
http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html