主页 / 问题 / 624224
Accepted
user232857
Asked:2020-02-07 01:17:24 +0000 UTC2020-02-07 01:17:24 +0000 UTC

如何删除 IE 9、10、11 中的默认按钮单击动画？

  • 772

在 IE 9、10、11 中，它们会button在点击时跳转。属性margin: 0和padding: 0关于伪类:active的:focus问题并没有解决。在视频上移动按钮的示例： https ://monosnap.com/file/Lcln7cTFX0lPwWjbeu5JnQA5ikcefn

javascript

4 个回答

  1. button > span,
button:active span, 
button:focus span {
    position: relative; 
    top: 0; 
    left: 0;
}
    <button><span>Button</span></button>

    • 10

  2. 最简单靠谱：把<button>换成<a> 在不止一个人写的bootstrap中，button的行为没有熄灭。在我的项目中，我使用 <a> http://getbootstrap.com/css/#buttons - 在示例中是链接按钮

    您还可以包括 IE 的 css，它可以在不添加内部标记的情况下补偿偏移量：.btn { padding: 1px 0px 0px 1px; } .btn:active { 填充：0px 1px 1px 0px; }

    也许相邻对象会有额外的不良行为，但您可以朝这个方向挖掘。

    • 5

  3. 该解决方案在 IE 11 上进行了测试。焦点通过从内边距的左侧和顶部减去一个像素并分别添加到右侧和底部来工作：

    button {
  padding: 10px;
  background: #fff;
  border: 1px solid;
}


button:active {
  padding: 9px 11px 11px 9px;
  background: #999;
}
    <button>click me</button>

    • 3
  4. Best Answer

    没有不必要的嵌套元素的全局解决方案：

    button {
  padding: 10px;
  background: #fff;
  border: 1px solid;
}

button:active, button:focus {
    position: гelative;
    background: #999;
}

/* стили только для IE9 */ 
@media screen and (min-width:0\0) { 
  button:active, button:focus {
    top: -1px;
    left: -1px;
  }
}

/* стили только для IE10 и IE11 */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  button:active, button:focus {
    top: -1px;
    left: -1px;
  }
}
    <button>
    click me
</button>

    • 2

相关问题