망막 디스플레이에서 이러한 요소들 사이의 단일 픽셀 간격을 제거하려면 어떻게해야합니까?

enter image description here http://jsfiddle.net/36ykrp9x/5/망막 디스플레이에서 이러한 요소들 사이의 단일 픽셀 간격을 제거하려면 어떻게해야합니까?

HTML

<div class="container"> 
    <button>O</button><button>O</button> 
</div>

CSS

.container { 
    width: 100%; 
    background-color: rgb(120, 200, 200); 
    text-align: center; 
} 
button { 
    border: 0; 
    width: 3rem; 
    height: 3rem; 
    opacity: 0.8; 
    background-color: gray; 
}

가장이 위의 코드는 내가 해결에 관심이 시각 버그를 캡처합니다. Firefox 나 Safari의 최신 버전에는 영향을 미치지 않습니다. 저는 현재 Chrome 39를 사용 중입니다. 망막 디스플레이와 최신 버전의 Chrome을 사용하고 있고 요소 사이에 얇은 선이 보이지 않으면 창 크기를 조금 조정 해보십시오. 단추 사이의가는 선은 깜박 거리면서 깜박입니다.

내 용도로는 계층 구조의 버튼 그룹 위에 100 % 너비의 요소가 하나 이상 있으며 버튼은 그 안에 수평으로 가운데에 있어야합니다. 버튼 자체는 0과 1 사이의 불투명도를 가져야합니다. div 또는 다른 요소를 사용하여 문제가 될 수 있습니다. 그러나 실제로 다른 사용자에게 시도한 결과 문제가 남아 있습니다.

불행하게도, 고정 폭 요소 내에 버튼 그룹을 중심으로하면 문제가 부활 나타납니다 궁극적으로 또한 어떻게 든 중심으로해야하는 고정 폭 버튼 그룹으로, 저를 위해이 문제를 해결하기 위해 표시되지 않습니다. 마진을 사용하여 찌그러 뜨리면 겹치는 부분이 생길 수 있습니다. 이는 불투명도가있는 요소에서 더 분명합니다. 이는 처음부터 틈을 메우는 것보다 낫지 않습니다.

실제로 배경색을 사용하는 것은 주목할 가치가 있습니다. rgba (r, g, b, a)는 대부분의 의도와 목적을 위해이 문제를 해결하지만,이 문제를 해결하는 데에만 관심이 있습니다. 가능한.

JavaScript와 관련된 솔루션에 특히 관심이 없습니다. 나는 운이 없다?

출처

2015-01-16 Reno

이 망막 디스플레이 유일한 문제인가 ???? 사진을 공유하십시오 ... –

문제는 망막 디스플레이에만 있습니다. jsfiddle의 사진이 이제 OP에 포함됩니다. – Reno

인라인 블록을 버튼에 표시 하시겠습니까? –

제공하신 정보와 Google 크롬에 대한 경험을 바탕으로, Chrome의 브라우저 버그 인 것으로 알려졌으며 Retina 화면의 Chrome 및 기타 브라우저에서만 발생한다고 생각합니다. Safari와 Firefox는 문제가 발생하지 않기 때문에 HTML과 CSS가 완벽 해 보이므로 여기에 문제가 표시되지 않습니다.

오페라는 이제 (웹킷에서 분기 된) 동일한 블링크 렌더링 엔진을 사용하므로 브라우저 렌더링 문제인지 확인할 수 있습니다 (Retina 디스플레이의 최신 버전 Opera에서 확인). 오페라가 동일한 문제를 표시하면 엔진 문제가 버그로 기록되어야합니다.

누군가 다른 방법을 생각하지 않는 한 일반적으로 브라우저 렌더링 버그를 가능한 한 혼자 남겨 두어 사이트에서 코드를 해킹하지 않도록하고 버그가 수정되면 ' 귀하의 사이트에 무엇이든해야합니다.

출처

2015-01-16 05:54:47

문제는 jsfiddle.net입니다. 나는 망막에서 Chrome 40과 동일한 1 픽셀 공간을 사용합니다. 이 시도 : 직접로드 http://dabblet.com/gist/c0068a79fc0268482ee1 또는 다음 코드를 :

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
.container { 
    width: 100%; 
    background-color: rgb(120, 200, 200); 
    text-align: center; 
} 
button { 
    border: 0; 
    width: 3rem; 
    height: 3rem; 
    opacity: 0.8; 
    background-color: gray; 
}  
</style> 
</head> 

<body> 
    <div class="container"> 
    <button>O</button><button>O</button> 
    </div>  
</body> 
</html>

출처

2015-02-03 10:14:46 Dionis

망막 디스플레이에서 이러한 요소들 사이의 단일 픽셀 간격을 제거하려면 어떻게해야합니까?

답변

관련 문제