오른쪽 공백 렌더링 문제 (오페라 및 사파리)

안녕하세요, opera 및 safari에 내 너비가 백분율을 사용하는 경우 right에 여분의 공백이있는 이유를 알고 계실 수 있습니다.오른쪽 공백 렌더링 문제 (오페라 및 사파리)

safari 5.1 및 opera 11.11

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
    <title>sample</title> 

    <link rel="stylesheet" type="text/css" href="style.css" /> 

</head> 

<body> 

    <div class="wrap"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

</body> 
</html>

CSS :

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, img { 
    margin: 0; padding: 0 
} 

/* remember to define focus styles! */ 
:focus { 
    outline: 0; 
} 

body { 
    font-family: arial, sans-serif; 
    font-size:13px; 
    color:#fff; 
    background-color:#000; 

} 

a {color:#444; text-decoration:none;} 

ul li {list-style-type:none;} 

p {padding:0 0 1.5em 0; line-height:1.7em; float:left;} 

img {border:none} 


.wrap { 
    float:left; 
    width:100%; 
} 
.wrap div{ 
    float:left; 
    width:25%; 
    height:100px; 
    background-color:#222; 
}

enter image description here

0,123,516 아래에있는 내 코드입니다

출처

2013-04-25 jhunlio

예제 코드 사용 [모든면에 공백이있는 문서 제공] (http://jsfiddle.net/FgaBE/embedded/result/) ... 전체 HTML/CSS를 게시 할 수 있습니까? – Nightfirecat

답장을 보내 주셔서 감사합니다. 위의 HTML을 업데이트합니다. – jhunlio

게시물에 CSS 코드가 모두'style.css'에 있습니까? – Nightfirecat

봅니다이 CSS를 추가 :

body { 
    margin: 0px; 
    padding: 0px; 
}

출처

2013-04-25 04:05:42

내 CSS 문제에 이것을 추가하는 것이 아직 있습니다. – jhunlio

방금 업데이트 한 코드가있는 Safari에는 공백이 없습니다. 또한, 모든 태그를 나열하는 대신 와일드 카드를 사용할 수 있습니다 -'* {margin : 0px; 패딩 : 0px;} ' –

사파리 5.1과 오페라 11.11이 있습니다. – jhunlio

쿨! 사파리가 틀린 계산을하고있는 것 같습니다. 프레임의 크기를 조정하면 때로는 적합하다는 것을 알 수 있습니다. 무슨 일인지 모르겠다. 그러나, 가능한 해결 방법은 display: table 것 :

.wrap { 
    width:100%; 
    display: table; 
} 

.wrap div{ 
    width:25%; 
    height:100px; 
    background-color:#222; 
    display: table-cell; 
}

Here is a demo.

이 상황에서 가능하지 않을 수는 모르겠어요. 그러나 잘못된 계산 문제를 해결합니다.

출처

2013-04-25 04:49:00

오른쪽 공백 렌더링 문제 (오페라 및 사파리)

답변

관련 문제