Question

我的代码在本地正确显示，导航栏中间有菱形，但“加号”符号缺少底部。（这就是我想知道如何修复它）

但是，在将代码粘贴到JSfiddle和Codepen.io

后，前景发生了显着变化

http://codepen.io/yumikohey/pen/PwPYxN http://jsfiddle.net/yumiko/ae1zmqpa/

CSS

body{

}

header{
    width: 100%;
    height: 80px;
}

#top{
    width: 100%;
    height: 50px;
    background-color: #000;
    border-bottom: 10px solid #C2973C;
}

#socialBar_top{
    width: 25%;
    height: 30px;
    margin: 0 10px;
    float: right;
}

ul {
    list-style-type: none;
    padding: 10px;
}

ul li {
    display: inline;
}

#expandButton {

    width: 100%;
    padding-left: 46%;
    margin-top: 10px;
}

.centerBox{
    margin-top: -50px;
    padding-top: -10px;
}

#diamondButton {
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-bottom-color: #C2973C;
    position: relative;
    top: -30px;
}

#diamondButton:after {
    content: '';
    position: absolute;
    left: -30px;
    top: 30px;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: #C2973C;
}

#plusSign {
    margin: -30px 0 -0 -14px;
    color: #fff;
    font-size: 3em;
}

提前感谢您的慷慨帮助。

Answer 1

试试这个：

#plusSign {
   color: #fff;
   font-size: 2em;
   margin: 0 0 0 -9px;
   position: absolute;
   top: 29px;
   z-index: 100000;
}

Answer 2

修正了此代码的问题，

#plusSign {
    margin-left: -14px;
    color: #fff;
    font-size: 3em;
    position: absolute;
    top: 0;
    z-index: 100;
}

但有人可以解释为什么codePen和JSfiddle无法正确显示我的代码吗？

CSS钻石形状，位于导航栏的中间

2 个答案: