border：outset;只在firefox工作 [英] border:outset; only working in firefox

问题描述

我有一个有关的文档（re： ）：

显示一个边框，使框呈现3D，压花。它与 inset 的相反。当应用于 border-collapse 设置为折叠的表单元格时，此值的行为类似于




您的表格具有 border-collapse：collapse; ，因此它实际上是在Firefox中以 border-style：ridge 的形式呈现。





c $ c> border-collapse：separate; 或设置 border-style：ridge; 来规范跨浏览器的样式， code>开头到 ridge 。

i have a table on this page with the following css (each td has the class box)

.box{
    border: 3px outset #959595;
    width:25px;
    height: 25px;
    background-color: #dddddd;
    cursor: pointer;
}

table{
    border-collapse: collapse;
    border-spacing: 0px;
    border: 4px inset #444;
}

i get what i want in firefox

but in any other browser it doesnt seem to be working as i want it to

解决方案

From MDN's documentation on border-style (re: outset):

Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

Your table has border-collapse: collapse;, so it's actually rendering as border-style: ridge in Firefox.

Either set border-collapse: separate; or set border-style: ridge; to normalize the style across browsers that may not be changing outset to ridge.

这篇关于border：outset;只在firefox工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！