查看文章 |
常见浏览器兼容性总结
2008-12-18 10:46
这篇文章用来记录一些常见的浏览器兼容问题的处理方式。保持更新…… 一、文本框和图像按钮（背景为图片的按钮）的对齐问题 可以设置按钮的css属性position:absolute;margin-top:1px; 在firefox和ie6中都正常了。 比如： //search.html <input type="text" name="keyword" id="keyword"/><input type="submit" id="search_button" value=""/> //css #keyword { background:#528AD7; height:16px; border:0; padding:0 4px; color:#FFF; cursor:pointer; } #search_button{ border:0; background:url(/static/images/search.gif) bottom no-repeat; height:16px; width:16px; position:absolute; margin-top:1px; } 二、一个很好用的display类型：inline-block 这个属性可以让一个元素具备inline和block的一些共同特性，不过在各个浏览器的兼容性都不一样。详见： http://www.quirksmode.org/css/display.html 三、去掉链接的虚线框 在IE下是使用html属性：hideFoucs，在HTML标签中加上hidefocus=”true” 属性即可，但这个属性是IE私有的，Firefox是不认的。 <a href="#" hidefocus="true" title="加了hidefocus" >链接</a>
 Firefox的处理方法比较符合标准，只需要在样式里设置a:focus{outline:none}皆可： .xzw_test a.setFocus:focus{outline:none} 三、设定div的最小高度 对于最小高度的设定，在firefox和ie6以上的版本，可以直接用min-height，而ie6及以下的版本不支持这个属性，但是可以直接通过height来设定，如果超过这个高度，ie会自动增加div的高度，因此可以用以下的办法来实现兼容各种浏览器的最小高度设定： min-height:300px; _height:300px; 四、firefox中右键问题 如果你给document绑定了一个click事件，会发现，在firefox中浏览时，当点击了鼠标右键时，也会引发click事件，这个时候，需要对event.button属性进行判断，如果event.button==2，则表示是右键。而在别的浏览器中，并不存在这个问题。 |
最近读者：
