IE8–10中:active不触发点击态的根源是其触发逻辑与现代浏览器不同,仅在鼠标按下且未移出时生效,且默认忽略按钮的:active样式,需重置outline和border行为。
IE8–10里
不触发点击态的根源
不是写法错了,是IE对
的触发逻辑和现代浏览器根本不同:它只在鼠标按下且未移出元素时生效,一旦鼠标移出就立刻失效;更关键的是,IE默认把
当作“表单控件”,会忽略开发者定义的
样式,除非显式重置其
和
行为。
给
加
必须同时处理三件事
光写
在IE下基本没用。要让它真正响应,得:
用
清除Firefox默认内边框(虽非IE问题,但常一并出现)
在IE中强制启用
:给
加
,否则焦点态会覆盖点击态
避免用
做点击反馈——IE8–9对
下的背景图切换支持极差,优先用纯色或
+ class切换比纯CSS
更可靠
当按钮需要明确的“按下→弹起”视觉反馈(比如提交按钮防重复点击),CSS伪类在IE里不可信。此时应放弃
,改用JS控制class:
对应CSS写成
。这样既绕过IE的
缺陷,又兼容所有版本(包括IE7用
替代
)。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
移动端Safari和IE混用时的双重陷阱
如果页面同时要适配老IE和iOS Safari,别用
模拟点击反馈——Safari默认禁用
(为提升滚动性能),需手动开启:
,再配合
激活
。但这个操作会让IE的
更不稳定。所以真实项目里,只要涉及跨端一致反馈,直接上JS方案最省心。
IE下
从来不是“加个前缀就能好”的问题,而是触发机制、渲染优先级、表单控件默认样式的叠加失效。越想靠CSS硬扛,越容易在测试阶段发现按钮点着没反应——这时候别调样式,先查
和事件绑定是否被覆盖。
:active:active:activeoutlineborderbutton:activebutton:active { background: #ccc; }button::-moz-focus-inner { border: 0; }:activebuttonoutline: none;background-image:activebox-shadowonclick:active:activebutton.addEventListener('mousedown', function() {
this.classList.add('is-pressed');
});
button.addEventListener('mouseup blur', function() {
this.classList.remove('is-pressed');
});button.is-pressed { background: #999; transform: translateY(1px); }:activeclassNameclassList:active:active* { -webkit-tap-highlight-color: transparent; }body { cursor: pointer; }:active:active:activeoutline