최근게시물 크롬과 ie 픽셀 차이 정보
최근게시물 크롬과 ie 픽셀 차이본문
그리고 적용시켜보았는데 크롬과 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 " <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 " " . $list[$i]['icon_new'];
// echo " " . $list[$i]['icon_file'];
// echo " " . $list[$i]['icon_link'];
echo " " . $list[$i]['icon_hot'];
// echo " " . $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;}
제 멋대로 수정해서 쓰고 있는지라 다운 받은 것에서 코드가 수정된 부분이 있을 수도 있습니다...
스킨 원본을 찾아보려 했는데 잘 못 찾겠어서 소스 올립니다.
어디를 어떻게 수정해야할까요.
다른 스킨들도 다운받아서 적용해봤는데 마찬가지로 차이가 나네요.
댓글 전체