Question

我正在构建导航栏，但有一个问题：在Mozilla的Firefox浏览器中它的大小似乎有所增加：

这是预期的大小，由每列内的填充控制：

（Opera）的

我试图避免这种情况是将导航栏的magin和padding设置为0，但没有改变！怎么了？我正在使用<nav>元素（也尝试使用<div>。）

在发布代码片段之前，我将展示LESS代码的一部分（与CSS非常相似），我在其中设置了导航栏（菜单）的样式：

#menu {
    background: @dark-next-menu-bg;
    margin: 0;
    padding: 0;
}

#menu .col {
    display: inline-block;
    padding: 6px 15px;
    &:hover {
        background: #1c1c1c;
        color: #fff;
    }
}

#menu .col span {
    color: @dark-next-menu-text-color;
}

以下是用于测试的已编译CSS的代码段：

body,
html {
    overflow: hidden;
    width: 100%;
    height: 100%
}
body {
    margin: 0
}
.let-select {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    -o-user-select: initial;
    user-select: initial
}
.Dark-Next,
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}
.Dark-Next {
    background: #444
}
.Dark-Next h1,
.Dark-Next h2,
.Dark-Next span {
    color: #fee;
    font-family: 'Segoe Ui', sans-serif
}
.Dark-Next h1 {
    font-size: 24px
}
.Dark-Next h1,
.Dark-Next h2 {
    font-weight: 200
}
.Dark-Next span {
    font-size: 12px
}
.Dark-Next button,
.Dark-Next input,
.Dark-Next select {
    color: #fff;
    font-family: 'Segoe Ui', sans-serif;
    outline: 0
}
.Dark-Next button:focus,
.Dark-Next input:focus,
.Dark-Next select:focus {
    border-color: #48f
}
.Dark-Next select {
    background: #222;
    border: 1px solid #333
}
.Dark-Next select option {
    padding: 8px;
    background: #444!important
}
.Dark-Next #menu {
    background: #111;
    margin: 0;
    padding: 0
}
.Dark-Next #menu .col {
    display: inline-block;
    padding: 6px 15px
}
.Dark-Next #menu .col:hover {
    background: #1c1c1c;
    color: #fff
}
.Dark-Next #menu .col span {
    color: #ccc
}
#menu {
    cursor: default;
    left: 0;
    top: 0;
    right: 100%;
    position: relative
}
#menu .col {
    display: table-cell;
    padding: 8px 14px
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Map Editor Next</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body class="Dark-Next">
    <nav id="menu">
        <div class="col">
            <span><i>NEXT</i></span>
        </div>
        <div class="col">
            <span>Map</span>
        </div>
        <div class="col">
            <span>Edit</span>
        </div>
        <div class="col">
            <span>View</span>
        </div>
        <div class="col">
            <span>Tools</span>
        </div>
        <select class="col">
            <option value="brush">Brush</option>
            <option value="eraser">Eraser</option>
        </select>
    </nav>
</body>
</html>

Answer 1

您是否考虑过将https://necolas.github.io/normalize.css/添加到您的项目中，这是相当标准的？

Answer 2

请参阅代码段（我添加了id来选择代码和样式）

＆＃13;

body,
html {
    overflow: hidden;
    width: 100%;
    height: 100%
}
body {
    margin: 0
}
.let-select {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    -o-user-select: initial;
    user-select: initial
}
.Dark-Next,
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}
.Dark-Next {
    background: #444
}
.Dark-Next h1,
.Dark-Next h2,
.Dark-Next span {
    color: #fee;
    font-family: 'Segoe Ui', sans-serif
}
.Dark-Next h1 {
    font-size: 24px
}
.Dark-Next h1,
.Dark-Next h2 {
    font-weight: 200
}
.Dark-Next span {
    font-size: 12px
}
.Dark-Next button,
.Dark-Next input,
.Dark-Next select {
    color: #fff;
    font-family: 'Segoe Ui', sans-serif;
    outline: 0
}
.Dark-Next button:focus,
.Dark-Next input:focus,
.Dark-Next select:focus {
    border-color: #48f
}
.Dark-Next select {
    background: #222;
    border: 1px solid #333
}
.Dark-Next select option {
    padding: 8px;
    background: #444!important
}
.Dark-Next #menu {
    background: #111;
    margin: 0;
    padding: 0
}
.Dark-Next #menu .col {
    display: inline-block;
    padding: 6px 15px
}
.Dark-Next #menu .col:hover {
    background: #1c1c1c;
    color: #fff
}
.Dark-Next #menu .col span {
    color: #ccc
}
#menu {
    cursor: default;
    left: 0;
    top: 0;
    right: 100%;
    position: relative
}
#menu .col {
    display: table-cell;
    padding: 8px 14px
}
#sel,#sel >*{
padding:0px !important  ;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Map Editor Next</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body class="Dark-Next">
    <nav id="menu">
        <div class="col">
            <span><i>NEXT</i></span>
        </div>
        <div class="col">
            <span>Map</span>
        </div>
        <div class="col">
            <span>Edit</span>
        </div>
        <div class="col">
            <span>View</span>
        </div>
        <div class="col">
            <span>Tools</span>
        </div>
        <select class="col" id="sel">
            <option value="brush">Brush</option>
            <option value="eraser">Eraser</option>
        </select>
    </nav>
</body>
</html>

＆＃13;

Firefox

2 个答案: