中心內容統一使用em的

我無法使用em的中心定製單選按鈕「tick」在其父母的中心。中心內容統一使用em的

它可以很好的使用px，但是em在某些尺寸下無法統一。它將內容錯位幾個像素，有時看起來很隨意。例如，如果我重新加載頁面而不改變樣式中的任何內容，它有時可能會正確渲染，而其他時間會錯誤地進行。

下面是演示該問題的小提琴。（切換EMS /像素，改變大小，看問題）

<body> 

    <div id="parent"> 
     <div id="child"></div> 
    </div> 
    <input type="button" id="toggle" value="toggle em vs px"/> 
    <input type="button" id="bigger" value="increace size"/> 
    <input type="button" id="smaller" value="decrease size"/> 
</body> 

body { 
    font-size: 10px; 
} 
#parent { 
    width: 32px; 
    height: 32px;  
    border: 2px solid rgb(37, 177, 172); 
    border-radius: 20px; 
    background: white; 
    margin: 20px; 
} 
#child { 
    width: 24px; 
    height: 24px; 
    margin: 4px; 
    background: rgb(37, 177, 172); 
    border-radius: 10px; 
} 

#parent.em { 
    width: 3em; 
    height: 3em;  
    border: 2px solid rgb(37, 177, 172); 
    background: white; 
    margin: 20px; 
    border-radius: 2em; 
} 
#parent.em #child { 
    width: 2em; 
    height: 2em; 
    margin: 0.46em; 
    background: rgb(37, 177, 172); 
    border-radius: 2em; 
} 

var size = 10; 

$(document).ready(function() { 
    $("input#toggle").click(function() { 
     $("#parent").toggleClass("em"); 
    }); 
    $("input#bigger").click(function() { 
     size++; 
     $("body").css("font-size", size); 
    }); 
    $("input#smaller").click(function() { 
     if (size > 1) {size--;} 
     $("body").css("font-size", size); 
    }); 
});

有什麼我能做的使用EM的保持，並確保它總是會顯示均勻。

來源

2015-02-11 Rainer Plumer

如果你在我的快速測試中保持相同的圈子比率，你的例子看起來很好。例如，更改.46em to .4em，2em to 2.4em,3em to 3.4em，它與使用您的基本大小的24px和34px相同。請記住，由於無法獲得像素的小數部分，因此ems會變圓。

小提琴這裏：http://jsfiddle.net/1k35tfgL/2/

來源

2015-02-11 23:20:29 jungy

嗨，你的樣品有相同的問題，因爲我的，如果減少/增加大小一次或兩次，那麼它看起來不對稱一次。我不介意舍入，但我希望它四面均勻地圓。 Atm它輪流......非常隨機。相互克隆的元素看起來不同，儘管它們在各方面都完全一樣。 – 2015-02-12 01:01:02

@RainerPlumer你是否試圖在中心保持那種方形的外觀？它可能是你所關心的「邊界半徑」嗎？這會導致中心的圓圈越來越多地圍繞在像素vs ems上，因爲一個是基於基礎而另一個是固定的。 – jungy 2015-02-12 01:19:56

在一種情況下，所有對象都是以像素爲單位的，並且在切換所有對象之後都是以em爲單位。邊框半徑不重要，你可以刪除該屬性，問題仍然存在，內部對象是不對稱居中。 – 2015-02-12 02:09:55

中心內容統一使用em的

回答

相關問題