테스트 사이트 - 개발 중인 베타 버전입니다

최근게시물 크롬과 ie 픽셀 차이

· 13년 전 · 3525
Untitled-3.jpg
css 파일을 불러오고 div로만 구성된 최근게시물 스킨을 다운 받았습니다.
그리고 적용시켜보았는데 크롬과 ie에서 1~2px정도씩 차이가 있더군요.

처음에는 눈치를 못 챘는데 사이트 메인이 약간 비대칭으로 하다보니 메인 하단에서 끝선이 안 맞더라고요.
그래서 포토샵으로 보니까 한 줄에 1px 정도씩 차이가 나면서 결국 하단에서는 차이가 많이 나게 되더라고요.

이곳저곳 소스를 수정해보아도 그대로네요.

여기 sir 사이트도 최근게시물 보면 크롬이랑 ie일때랑 위치가 1px 정도 다르더라고요.
원래 어쩔 수 없는 건가요..?

스샷의 테두리는 각각 같은 크기인데요. 높이뿐만 아니라 좌우로도 차이가 나네요.

왼쪽이 제가 운영하는 사이트고 오른쪽이 sir 사이트인데요.
sir 사이트는 제일 위에서부터 해서 1px밖에 차이가 안 나네요.

근데 제가 운영하는 사이트는 각 줄마다 차이가 있어서 결국 크게 차이가 납니다.


----- latest.skin.php ---------------------------------------------------------

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// 네이버 http://html.nhndesign.com/?mid=ui_pattern_list 참고
// 리메이크: Terrorboy
?>
<link rel="stylesheet" href="<?=$latest_skin_path?>/css/style.css" type="text/css" />

<!--ui object -->
<div class="section_ul">
<h2><a href='<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bo_table?>'><em class="to-bottom"></em><?=$board[bo_subject]?></a></h2>
<ul>
<?
for ($i=0; $i<count($list); $i++) {
// 최근 게시물 시간 정렬 수정
$list[$i]['wr_datetime'] = date("Y.m.d", time($list[$i]['wr_datetime']));
?>
<li>
<span class="bu">›</span>
<?
echo "<a href='{$list[$i]['href']}'>";
if ($list[$i]['is_notice'])
echo "<font style='font-family:돋움; font-size:9pt;'><strong>{$list[$i]['subject']}</strong></font>";
else
echo "<font style='font-family:돋움; font-size:9pt;'>{$list[$i]['subject']}</font>";
echo "</a>";

if ($list[$i]['comment_cnt'])
echo "&nbsp;<span style='font-family:돋움; font-size:8pt; color:#9A9A9A;'>{$list[$i]['comment_cnt']}</span>";

// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }

echo "&nbsp;" . $list[$i]['icon_new'];
// echo "&nbsp;" . $list[$i]['icon_file'];
// echo "&nbsp;" . $list[$i]['icon_link'];
echo "&nbsp;" . $list[$i]['icon_hot'];
// echo "&nbsp;" . $list[$i]['icon_secret'];
?>
<span class="time"><?=$list[$i][datetime]?></span>
</li>

<? } ?>
<? if (count($list) == 0) { ?>
<li><div class="none">최근 게시물이 없습니다.</div></li>
<? } ?>
</ul>
<a class="more" href="<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bo_table?>">
<span>››</span></a> </div>
<!--//ui object -->


----- style.css ---------------------------------------------------------


/* UI Object */
.section_ul{position:relative;border:1px solid #ededed; background:#fff;font-size:12px;font-family:Tahoma, Geneva, sans-serif;line-height:normal;*zoom:1}
.section_ul a{text-decoration:none}
.section_ul a:hover,
.section_ul a:active,
.section_ul a:focus{text-decoration:none}
.section_ul em{font-style:normal}
.section_ul h2{height:15px; position:relative; margin:0;padding:6px 0 5px 18px;border-bottom:1px solid #ededed;font-size:12px;color:#333; background:#f0f0f0 url(img/tit-arr.gif) no-repeat 8px center; }
.section_ul h2 em{color:#cf3292}
.section_ul ul{margin:13px;padding:0;list-style:none}
.section_ul li{position:relative;margin:0 0 10px 0; border-bottom:1px dashed #eaeaea;}
.section_ul li:after{display:block;clear:both;content:""}
.section_ul li .bu{float:left;margin:0 4px 0 0;color:#999}
.section_ul li a{float:left}
.section_ul li .time{float:right;clear:right;font-size:11px;color:#a8a8a8;white-space:nowrap}
.section_ul .more{position:absolute;top:4px;right:13px;font:14px Dotum, 돋움;text-decoration:none !important}
.section_ul .more span{margin:0 2px 0 0;font-size:16px;font-weight:bold;color:#d76ea9;vertical-align:middle}
/* //UI Object */

.to-bottom{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px 0 6px; position:absolute; right:10px; bottom:0;margin-bottom:-6px;}


제 멋대로 수정해서 쓰고 있는지라 다운 받은 것에서 코드가 수정된 부분이 있을 수도 있습니다...
스킨 원본을 찾아보려 했는데 잘 못 찾겠어서 소스 올립니다.
어디를 어떻게 수정해야할까요.

다른 스킨들도 다운받아서 적용해봤는데 마찬가지로 차이가 나네요.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
284508
284499
284492
284490
284484
284481
284478
284476
284474
284472
284470
284458
284457
284454
284453
284447
284446
284444
284441
284440