无涯教程网

Css 在 Firefox 中删除额外的按钮间距填充

发布于04月02日

请参见此代码示例:http://jsfiddle.net/Z2BMK/

Chrome/IE8如下所示

在此处输入图像描述

Firefox看起来像这样

在此处输入图像描述

我的CSS是

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

如何更改代码示例，使两种浏览器中的按钮相同？我不想使用基于JavaScript的超链接，因为它们不适用于键盘上的空格键，而且它必须有href个URL，这不是一种干净的处理方式.

我的解决方案，自从Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }个

推荐答案

添加以下内容:

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

http://jsfiddle.net/thirtydot/Z2BMK/1/

包含上面的border规则是按钮在两个浏览器中看起来相同所必需的，但当按钮在Firefox中为active时，它还会删除虚线轮廓.许多开发人员go 掉了这个虚线轮廓，可以 Select 用视觉上更友好的东西来代替它.

Css相关问答推荐

如何在移动屏幕尺寸上包装元素？

添加Angular 17的Stackblitz项目的Angular material 主题？

Firefox中的解决方法：has(不使用JavaScript)

CSS：使用 Material Icon 作为：：marker 或：：before 使 li 元素不起作用

滚动弹性盒

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

更改 20 个实例中的一个组件的样式

Tailwind CSS 隐藏和可见

css渐变实现2色虚线边框

我应该在 HTML 中为我的 IMG 指定高度和宽度属性吗？

单击时 HTML 输入字段未获得焦点

使用 float：left 后如何获得新行？

透明的空心或切出的圆圈

如何使用 Bootstrap2 使 div 居中？

如何根据容器大小设置字体大小？

CSS 否定伪类：not() 用于父/祖先元素

标签的 CSS 宽度

为什么对 HTML 表单而不是表格使用定义列表(DL、DD、DT)标签？

为什么容器 div 坚持比 IMG 或 SVG 内容略大？

仅当存在 2 个类时，您可以使用 CSS 定位元素吗？

实用课程推荐

相关教程推荐