• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
عدم سازگاری با مرورگر ها
#1
Rainbow 
سلام دوستان،
به قطعه کد زیر دقت کنید:

کد پی‌اچ‌پی:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Test</title>
<
style type="text/css">
.
panel {background-image:url(menu.gif); width:170pxheight:25pxtext-align:centerpadding-top:5px;}
</
style>
</
head>
<
body>
 <
center>
<
div class="panel">Main menu</div
 </
center>
</
body>
</
html

فرض کنید کد بالا قسمتی از یک قالب بوده که قراره برای سرویس وبلاگ دهی بلگفا طراحی بشه.
ارتفاع اصلی تصویر 30 پیکسل بوده با این حال برای اینکه متن روی تصویر رو بتونم تقریبا در وسط نمایش بدم از خاصیت padding-top:5px استفاده کردم، با این کار متن به اندازه ی 5 پیکسل پایین تر از جای خودش میاد و در نتیجه ارتفاع <div> به 35 پیکسل افزایش پیدا میکنه که این عمل باعث میشه ناخواسته تصویر یک بار دیگه تکرار بشه پس ناچارا همون اول توی بخش استایل ارتفاع رو 25 پیکسل میگیریم تا این مشکل برطرف بشه. در این صورت قالب روی کامپیوتر، کاملا با مرورگر های مختلف سازگار هست اما وقتی که کد رو درون بلگفا قرار میدی، قالب توی مرورگر IE ارتفاع تصویر رو 25 پیکسل فرض میکنه اما توی Firefox همون 30 پیکسل!!!
ایا روش دیگه ای وجود داره که بتونم متن رو جوری قرار بدم که این مشکلات پیش نیاد یا اصلا چه جوری میشه این مشکل رو برطرف کرد؟
ممنون.
غایب
  پاسخ
تشکر شده توسط :
#2
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.panel {background:url(menu.gif) no-repeat; width:170px; height:25px; text-align:center; }
.panel p{margin-top:5px;}
</style>
</head>
<body>
<center>
<div class="panel"><p>Main menu</p></div>
</center>
  پاسخ
تشکر شده توسط : undefined parvane


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان