Question

我一直在查看复选框和输入，特别是提交类型，我发现我显示的所有浏览器略有不同。我一直都知道存在细微差别，但我认为尺寸至少是标准的我已经从5个主流浏览器中获取了输入提交按钮的正常，悬停和活动状态的图像，并以300％显示它们，以便更清楚地看到差异。在此之下，我有一个真正的浏览器默认输入按钮它适用于所有浏览器，但IE。悬停样式似乎会干扰真实按钮的悬停效果。它没有一个类，甚至不在div中，所以我不明白为什么我的div.class风格正在影响输入。这种情况一直发生在IE7上，此时按钮表现正常，但css：active状态不再有效，而在IE5，hover和active都不再有效。猜猜他们不支持他们？这是我的代码......谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
    <title>Button Test</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

<style>
    .ie11 {
        width: 215px;
        height: 70px;
        background: url('images/buttonIE11.png') no-repeat;
    }
    .ie11:hover {
        background: url('images/buttonIE11Hover.png') no-repeat;    
    }
    .ie11:active {
        background: url('images/buttonIE11Active.png') no-repeat;   
    }
</style>
</head>

<body>

    <span>IE 11</span>      
    <div class="ie11"></div>    
    <br />
    <span>Browser Default</span>
    <form>
        <input type="submit" value="Register" />
    </form>

</body>
</html>

我无法弄清楚如何在评论中格式化代码：/
我已经明白了......

<!DOCTYPE html>
<head>
<style>.ie11:hover {}</style>
</head>
<body>
    <form>
        <input type="submit" value="Register" />
    </form>

这种风格，它可以是任何类，以某种方式干扰IE的输入按钮，我无法弄清楚为什么。输入按钮的悬停功能不再起作用。它在悬停时没有任何作用。顺便提一下，如果你激活它，按住鼠标并离开按钮，你就可以看到悬停状态，直到你放开鼠标。

Answer 1

你可以试试这个：

input, select, textarea {   box-sizing: border-box;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box; }

所以你可以在所有浏览器上使用相同的尺寸

Answer 2

经过进一步的实验，我想我找到了答案。我尝试了ID而不是class，div，span，img等。似乎IE不喜欢你使用：将鼠标悬停在除链接标记之外的任何内容上。不确定原因，但按钮现在可以正常工作。
如果有人有兴趣在不同的浏览器中看到Input元素的样子，我想是一个片段。希望它有效...

a {
	display: block;
}

a.chrome {
	width: 197px;
	height: 63px;
	background: url('http://s31.postimg.org/gspnlvlaz/button_Chrome.png') no-repeat;
}
a.chrome:hover {
	background: url('http://s31.postimg.org/ywso6iizf/button_Chrome_Hover.png') no-repeat;	
}
a.chrome:active {
	background: url('http://s31.postimg.org/7bzuf91gb/button_Chrome_Active.png') no-repeat;	
}

a.ie11 {
	width: 215px;
	height: 70px;
	background: url('http://s31.postimg.org/jph9zwgij/button_IE11.png') no-repeat;
}
a.ie11:hover {
	background: url('http://s31.postimg.org/wd1mq5kt7/button_IE11_Hover.png') no-repeat;	
}
a.ie11:active {
	background: url('http://s31.postimg.org/xa81z0wbf/button_IE11_Active.png') no-repeat;	
}

a.opera {
	width: 195px;
	height: 61px;
	background: url('http://s31.postimg.org/5ghnhu1zv/button_Opera.png') no-repeat;
}
a.opera:hover {
	background: url('http://s31.postimg.org/m5j3dqyl7/button_Opera_Hover.png') no-repeat;	
}
a.opera:active {
	background: url('http://s31.postimg.org/gwo2fvg63/button_Opera_Active.png') no-repeat;	
}

a.safari {
	width: 193px;
	height: 60px;
	background: url('http://s31.postimg.org/k7cffr63f/button_Safari.png') no-repeat;
}
a.safari:hover {
	background: url('http://s31.postimg.org/ttb1t63kr/button_Safari_Hover.png') no-repeat;	
}
a.safari:active {
	background: url('http://s31.postimg.org/gnvjn29p7/button_Safari_Active.png') no-repeat;	
}

a.ff {
	width: 202px;
	height: 60px;
	background: url('http://s31.postimg.org/5zi5dd40r/button_FF.png') no-repeat;
}
a.ff:hover {
	background: url('http://s31.postimg.org/xj11b7jq3/button_FFHover.png') no-repeat;	
}
a.ff:active {
	background: url('http://s31.postimg.org/z0mhmrogr/button_FFActive.png') no-repeat;	
}

<!DOCTYPE html>
<head>
	<title>Button Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<span>Chrome. Size = 300%</span>
	<a class="chrome" href="#"></a>
	<br />
	<span>IE 11. Size = 300%</span>		
	<a class="ie11" href="#"></a>
	<br />
	<span>Opera. Size = 300%</span>		
	<a class="opera" href="#"></a>
	<br />
	<span>Safari. Size = 300%</span>		
	<a class="safari" href="#"></a>
	<br />
	<span>FireFox. Size = 300%</span>		
	<a class="ff" href="#"></a>
	<br />
	<span>Browser Default. Size = 100%</span>
	<form>
		<input type="submit" value="Register" />
	</form>
</body>
</html>

CSS输入在IE

2 个答案: