位置:固定不在chrome中工作

时间:2013-04-22 17:08:17

标签: html css widget blogger css-position

我已经在我的博客http://kasperikoski.blogspot.fi中添加了一个新的小部件,它基本上可以通过使用“添加HTML /脚本”作为菜单。代码是博客HTML / CSS:

    .menukadn   {
    line-height: 1;
    }

    a.limeka, a.limeka:visited, a.limeka:active {
    font-family: 'Maven Pro', sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #bbb;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 150ms linear;
    letter-spacing: -0.090em;
    }

    a.limeka:hover  {
    color: #21a97e;
    transition: color 150ms linear;
    }

到WIDGET:

    <div class="menukadn">
    <a href="https://www.facebook.com/Kadnnn" class="limeka" title="" target="_blank">Facebook</a>
    <br/>
    <a href="http://instagram.com/kasperikoski" class="limeka" title="" target="_blank">Instagram</a>
    </div>

当我尝试添加这样的定位时,

    .menukadn   {
    line-height: 1;
    position: fixed;
    }

或者替代小部件DIV#HTML1到它自己:

    #HTML1 {
    position: fixed;
    }

它在Mozilla Firefox上完美运行但在Chrome中,我的小部件#HTML1位于距其应有的位置大约800px(列左 - 外),紧邻内部左侧边框。任何可能存在其他代码导致矛盾的想法?

1 个答案:

答案 0 :(得分:1)

除了定位position:fixed之外,你还没有定义元素的位置,例如

#HTML1 {
   position: fixed;
   left:0;
   top:0;
}

如果你想将它与屏幕宽度相关联,你可以试试这样的事情:

#HTML1 {
   position: fixed;
   left:0;
   right:0;
   width: 200px;
   margin:0 auto;
}

唯一的缺点是你来定义宽度,然后玩leftright,直到你想要它为止。