添加了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的左側被截斷

回答

相關問題