透過対象に背景色を指定してあげることで解消

img{
	background: #FFF; /*背景色を指定*/
}

a img:hover {
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
 	}


a .nonHover:hover {
	filter: alpha(opacity=100);
	-moz-opacity:1.00;
	opacity:1.00;
 	}

IEでinputに背景で画像を表示させるとき、

text-indent: -9999px

と指定すると、IEの7や8で画像がどこかへいってします。
その際は、

display: block;
border-width: 0px;

を指定すると良い。

背景画像の大きさを設定するCSSは、各ブラウザの事を考え、下記の様に設定する。

	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	-ms-background-size: 100% auto;

/*————————————————
500pxの最低の高さ
————————————————-*/
#hoge {
min-height:500px;
height:auto !important;
height:500px;
}

cssで背景の大きさをスマホなども含め、各ブラウザに対応する方法は以下。

	background-size: 37px 22px;
	-webkit-background-size: 37px 22px;
	-moz-background-size: 37px 22px;
	-o-background-size: 37px 22px;
	-ms-background-size: 37px 22px;

.sample {
	display: table-cell;
	vertical-align: middle;
}

/* IE 7 */
*:first-child+html .sample {
	display: inline;
	zoom: 1;
}
 
/*\*//*/
* html .sample {
	display: inline-block;
}
/**/

リンクを仕込んだ画像をクリックすると、各版形に点線状の枠線が表示されます。
なんとなくぶしょったいので、下記にそれの対処の方法をメモしておきます。

CSS

.nonborder {
  border:none;
  outline:none;
}

html

<map name="Map" id="Map">
  <area shape="poly" onFocus="this.blur();" class="nonborder" 

japascript

var ua = navigator.userAgent;
var chkFF = ua.indexOf("Firefox",0);
if(chkFF>0){
  if($("#Map area").length){
    $("#Map area").attr("onFocus","");
  }
}