添加了JavaScript的div的左侧被截断

我在页面上的某个固定位置动态地添加了“侧面导航栏”。它增加了罚款，没有错误或警告。问题是，导航栏中每个“圆圈”的左侧似乎被切断。这是非常微妙的，但我不想放手，并想知道为什么会发生。这里是我的意思是：添加了JavaScript的div的左侧被截断

nav

正如你所看到的，这是非常微妙的，“小”，但为什么会发生？

的jsfiddle证明：http://jsfiddle.net/nymovqt5/5/

这里是JS添加导航栏：

//initialize side nav bar 
jQuery(document).ready(function() { 
    var SideBar = document.createElement("Div"); 
    SideBar.setAttribute("id", "SideBarNav"); 

    var Circle1 = document.createElement("Div"); 
    Circle1.setAttribute("id", "Circle1"); 

    var Circle2 = document.createElement("Div"); 
    Circle2.setAttribute("id", "Circle2"); 

    var Circle3 = document.createElement("Div"); 
    Circle3.setAttribute("id", "Circle3"); 

    var Circle4 = document.createElement("Div"); 
    Circle4.setAttribute("id", "Circle4"); 

    var Circle5 = document.createElement("Div"); 
    Circle5.setAttribute("id", "Circle5"); 

    var Circle6 = document.createElement("Div"); 
    Circle6.setAttribute("id", "Circle6"); 

    SideBar.appendChild(Circle1); 
    SideBar.appendChild(Circle2); 
    SideBar.appendChild(Circle3); 
    SideBar.appendChild(Circle4); 
    SideBar.appendChild(Circle5); 
    SideBar.appendChild(Circle6); 
    document.body.appendChild(SideBar); 

});

，我的风格是这样的：

#Circle1:hover, #Circle2:hover, #Circle3:hover, #Circle4:hover, #Circle5:hover, #Circle6:hover{ 
cursor: pointer; 
} 
#Circle1 { 
    border-radius: 50px/50px;; 
    height: 15px; 
    width: 15px; 
    margin: 0 auto; 
    background: blue; 
    opacity: 0.7; 
    margin: 10px; 
opacity: .7; 
} 

#Circle2, #Circle3, #Circle4, #Circle5, #Circle6 { 
    border-radius: 50px/50px;; 
    height: 15px; 
    width: 15px; 
    margin: 0 auto; 
    background: blue; 
    opacity: 0.7; 
    margin: 10px; 
opacity: .7; 
} 
#SideBarNav { 
display: inline-block; 
color: white; 
position: fixed; 
top: 50%; 
right: 0; 
transform: translate(-50%, -50%); 
text-align: center; 
border: 2px solid rgba(0, 0, 255, 0.5); 
}

来源

2014-10-01 Harry

奇怪的是，将宽度设置为16px给出了一个完美的圆圈（如在，不切断，显然它更椭圆形），但将高度设置为16px也会将其切断。 – 2014-10-01 06:14:44

这么奇怪......其实只是意识到，如果你放大你的浏览器，它又是完美的... – Harry 2014-10-01 06:18:02

如果你删除：transform：translate（-50％，-50％）;在容器上，圆圈看起来确定....不是答案，但是... :) – sinisake 2014-10-01 06:27:28

你正在做一个假的通过在一个盒子周围绘制一个蓝色方块，并在其周围留出一个白色边缘...并使用覆盖在蓝色方块角落上的带有弯曲角的白色边框来制作蓝色方块s eem通告。即白色边框必须恰到好处才能正确覆盖蓝色边角。

问题是，正方形与正边距的总宽度是奇数个像素（35px），这意味着左手边可能与应用的略有不同（即，一个像素高于）右手边意味着一个较小的覆盖像素，因此显示一个更多的白色边缘像素。

将宽度更改为16px意味着广场的每一边都是平坦的，您可以确定它会覆盖每一面。

来源

2014-10-01 06:25:30

从#sideBarNav中移除转换属性。您可以使用其他一些样式来定位它。就我所知，转换属性通常会创建一个边界。

来源

2014-10-01 06:30:10 Vis

添加了JavaScript的div的左侧被截断

回答

相关问题