中心内容统一使用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的

回答

相关问题