Question

所以我搜索了其他主题，但没有找到答案。在我看来，我的问题有点奇怪。我试图为我的导航链接做大约10px到15px的字间距。当我通过打开索引文件在本地测试页面时，它可以工作。但是，一旦我将其上传到cpanel，它就无法正常工作。

CSS：

/* Body and Container Styles */
body {
    background - color: #C8C8C6;
    min - width: 50 % ;
}

container {

    margin - left: auto;
    margin - right: auto;
    width: 100 % ;
    min - width: 1340px;

}

/* Div styles */

div {
    border - radius: 10px;
    overflow: visible;
}


.navigation {

    word - spacing: 15px;
    height: 30px;
    background - color: #66CCFF;
    margin-top: 5px;
    margin-right: 150px;
    margin-bottom: 5px;
    margin-left: 150px;
    border: 1px solid;
    border-color: # FFCC66;
    overflow: visible;
    min - width: 800px;
    min - height: 30px;


}

ul {
    list - style - type: none;
    margin - top: 2px;
    margin - bottom: 5px;
    padding: 0;
    font - size: x - large;
}

li {
    display: inline;

}

.left {
    background - color: #FFCC66;
    border: 2px dashed;
    border - color: #66CCFF;
    margin-top:10px;
    height: 250px;
    width: 100px;
    min-height: 500px;
    min-width: 200px;
    float:left;
    overflow: visible;
}

.right{
    display: inline-block;
    background-color: # FFCC66;
    border: 2px dashed;
    border - color: #66CCFF;
    margin-top:10px;
    height: 500px;
    width: 200px;
    min-height: 250px;
    min-width: 100px;
    float: right;
    overflow: visible;
}

.middle {    
    display: inline-block;
    margin-left: 5%;
    background-color: # FFCC66;
    border: 2px dashed;
    border - color: #66CCFF;
    margin-top:10px;
    height: 500px;
    width: 800px;
    min-height: 250px;
    min-width: 400px;
    overflow: scroll;
}



/* footer style */

footer {
    height: 20px;
    background - color: # 66CCFF;
    margin - top: 10px;
    margin - right: 150px;
    margin - bottom: 5px;
    margin - left: 150px;
    border: 1px solid;
    border - color: #FFCC66;
    overflow: visible;
}

footer p {
    margin: auto;
    margin - top: 2px;
    margin - left: 5px;
    font - size: x - small;
    text - align: left;
}


/* Media styles */

embed {
    margin - top: 20px;
}

/* Heading Styles */

h1 {
    text - align: center;
    font - family: Impact,
    Charcoal,
    sans - serif;

}


/* link styles */

a: link {
    text - decoration: none;
}
a: visited {
    color: white;
}
a: hover {
    color: #C8C8C6;
}


/* Paragraph and Text styles */

p {
    text - align: center;
}

/* Scrollbar */

::-webkit - scrollbar {
    width: 10px;
}

::-webkit - scrollbar - track {
    -webkit - box - shadow: inset 0 0 6px rgba(200, 200, 198, 1);
    border - radius: 7px;
}

::-webkit - scrollbar - thumb {
    border - radius: 7px; - webkit - box - shadow: inset 0 0 6px rgba(71, 211, 255, 1);
}

Answer 1

它无效的原因是因为您使用的是<center>元素。这个元素已经过时了。您应该使用CSS来确定它的位置（您可以将text-align: center;放在.navigation上。）不要使用过时的元素。完成后，word-spacing工作正常。

http://validator.w3.org/和http://jigsaw.w3.org/css-validator/有助于检查您的网页是否存在人类容易错过的语法错误。它们是开发网站的人们非常宝贵的工具。

CSS / HTML - Chrome中的Word间距无法正常工作

1 个答案: