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

CSS 뭐가 문제죠?? (크로스브라우징)

· 13년 전 · 1485 · 1
크롬.png
1.gif
위에가 크롬

아래가 IE8 인데요

그림처럼 가로 간격에 문제가 있네요..

padding으로 인해 발생하는 문제고요 width를 그냥 줄이면 크롬에서는 맞는데 익플에서는

짧게나와서 어떻게 해야할지를 모르겠습니다...

아래가 그림 부분의 CSS 고요

#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }


아래는 아웃로그인 스킨2 전체입니다.

<!-- 로그인 후 외부로그인 시작 -->
<div id="mw-outlogin">
<form name="flogin" method="post" action="javascript:flogin_submit(document.flogin);" autocomplete="off">
<input type="hidden" name="url" value="<?=$url?>">
<div class="box-outside">
<div class="box-inside">
<? if ($is_admin == "super" || $is_auth) { ?>
<div class="login-title"><a href="<?=$g4[admin_path]?>/"><strong><?=$nick?></strong></a></div>
<? } else { ?>
<div class="login-title"><strong><?=$nick?></strong></div>
<? } ?>
<div class="login-btn"><a href="<?=$g4[bbs_path]?>/logout.php?url=<?=$urlencode?>"><img src="<?=$outlogin_skin_path?>/img/outlogin2_button.gif" align="absmiddle" border="0"></a></div>
<div class="login-memo"><a href="javascript:win_memo();"><?=$memo_not_read?></a></div>
<div class="login-point"><a href="javascript:win_point();"><?=$point?>p</div>
<div class="login-cash"><a href="<?=$g4[path]?>/plugin/cybercash/"><span class="login-cash-number"><?=number_format($mw_cash[mb_cash])?></span> <?=$mw_cash[cf_cash_unit]?></a></div>
<div class="login-membership">
<span class="scrap"><a href="javascript:win_scrap();">스크랩</a></span>
<span class="div">|</span>
<span class="user"><a href="<?=$g4[bbs_path]?>/member_confirm.php?url=register_form.php">내정보</a></span>
<span class="div">|</span>
<span class="attendance"><a href="<?=$g4[path]?>/plugin/attendance/index.php">출석부</a></span>
</div>
</div>
</div>
</form>
</div>
<!-- 로그인 후 외부로그인 끝 -->

<style type="text/css">
#mw-outlogin a { color:#454545; font-size:8pt; text-decoration:none; }
#mw-outlogin .box-outside { width:250px; height:100px; background-color:#D9D9D9; }
#mw-outlogin .box-inside { position:absolute; margin:1px 0 1px 0; width:250px; height:98px; background-color:#f4f4f4; }
#mw-outlogin .box-inside { line-height:16px; color:#7dacd8; font-size:9pt; font-family:굴림; }
#mw-outlogin .login-title { position:absolute; padding:5px 5px 5px 10px; background-color:#ececec; margin:0; width:250px; border-bottom:1px solid #D9D9D9; }
#mw-outlogin .login-btn { position:absolute; margin:3px 0 0 180px; }
#mw-outlogin .login-point { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-coin.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 15px; }
#mw-outlogin .login-memo { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-memo.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 120px; }
#mw-outlogin .login-cash { position:absolute; background:url(<?=$outlogin_skin_path?>/img/ico-cash.png) no-repeat; font-weight:bold; padding:0 0 0 25px; margin:40px 0 0 180px; }
#mw-outlogin .login-membership { position:absolute; background-color:#EAEAEA; margin:65px 0 0 10px; padding:5px 0 0 0; width:232px; height:25px; }
#mw-outlogin .login-membership { text-align:center; font-size:9pt; color:#d0e1f1; }
#mw-outlogin .login-membership a { font-size:9pt; }
#mw-outlogin .login-membership .scrap { background:url(<?=$outlogin_skin_path?>/img/ico-scrap.png) no-repeat; margin:2px 0 0 0px; padding:1px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .user { background:url(<?=$outlogin_skin_path?>/img/ico-user.png) no-repeat; margin:3px 0 0 0px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .attendance { background:url(<?=$outlogin_skin_path?>/img/ico-attendance.png) no-repeat; margin:3px 0 0 3px; padding:0px 0 0 18px; letter-spacing:-1px; }
#mw-outlogin .login-membership .div { color:#C8C8C8; margin:3px 0 0 5px; }
</style>

댓글 작성

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

로그인하기

댓글 1개

13년 전
padding을 줄경우 width 포함이냐 아니면 미포함이냐 문제인 듯 싶습니다.
이 문제는 document선언을 xhtml로 안했을 경우 생기는 문제입니다.
(다른 문서 선언시에 어떻게 되는지는 잘모르겠습니다만;;)

보통 브라우저마다 padding을 width에 포함하냐 안포함하냐의 여부가 조금 다르기 때문에
잘 안될 경우 margin 을 주시거나 아니면 부모 <div> 를 하나 만들어서 부모 div에 padding을 주는 꼼수를 쓰시면 해결 될 듯 보입니다.

게시글 목록

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