Category: ចម្ងល់ ឬ​សំណួរ

ចម្ងល់ ឬ​សំណួរ

បញ្ហា CSS3 Box Shadow ជាមួយ IE

ទឹម បឿន

ខ្ញុំ​មាន​បញ្ហា​ពេល​ចង់​ប្រើ Shadow ជាមួយ Internet Explorer រក​វិធី​ដោះស្រាយ​ជិត​ពីរ​ថ្ងៃ​មក​ហើយ តែ​នៅ​ដោះស្រាយ​មិន​ទាន់​ចេញ ។

ខ្ញុំ​ប្រើ CSS3 ដាក់ Shadow ឱ្យ​ប្រអប់ និង​អក្សរ តែ​វា​ចេញ​លទ្ធផល​មិន​ដូច​អ្វី​ដែល​ខ្ញុំ​ចង់​បាន ជាមួយ Internet Explorer ។ Firefox គឺ​ជា​អ្វី​ដែល​ខ្ញុំ​ចង់​បាន គឺ​ប្រអប់​រាង​មូល​ជ្រុង មាន​ស្រមោល និង​អក្សរ​មាន​ស្រមោល​ពណ៌​ស ដែល​មើល​ទៅ ហាក់​ដូច​អក្សរ​ក្រហូង​លើ​ផ្ទៃ​ប្រអប់ ។ ប៉ុន្តែ​បើ​មើល​នៅ IE វិញ ស្រមោល​របស់​ប្រអប់​បែរ​ជា​លោត​ទៅ​ដាក់​ឱ្យ​អក្សរ​ទៅ​វិញ ។

មើល​មួយ​ទៀត!

នៅ​ទីនេះ ខ្ញុំ​ប្រើ gradient ចាក់​ពណ៌, border-radius ដើម្បី​កាត់​ជ្រុង​របស់​ប្រអប់​ឱ្យ​មូល ឃើញ​ថា ទាំង Firefox និង IE អត់​មាន​បញ្ហា​ទេ តែ​ក្រោយ​ពេល​ខ្ញុំ​បន្ថែម box-shadow ឬ text-shadow, IE ក៏​ប្រែ​ដូច​រូប​ខាង​ក្រោម ។ បញ្ហា​នេះ​មិន​ខុស​អំពី​បញ្ហា​របស់​ប្រអប់​ខាង​លើ​នោះ​ទេ ។ ខ្ញុំ​បាន​យល់​ថា អាយអ៊ី បណ្ដាល​មក​ពី shadow រត់​ទៅ​លើ object បន្ទាប់​ទៀត គឺ​បើ​ដាក់​ឱ្យ object នេះ ហើយ​មាន object នៅ​បន្ទាប់​វា​មួយ​ទៀត វា​នឹង​រត់​ទៅ object បន្ទាប់​នោះ តែ​បើ​មាន​តែ​វា​ដែល​នៅ​ក្រោយ​គេ ដាក់​ស្រមោល​ទៅ​គ្មាន​បញ្ហា​ទេ ។

រូប​ខាងក្រោម​ខុស​ពី​ប្រអប់​ខាង​លើ​បន្តិច ដោយសារ ពេល​ប្រើ​ជាមួយ Firefox វា​ចាប់​យក gradient របស់ CSS3 ពេល​ប្រើ​ជាមួយ IE វា​ទាញ​យក​រូប​ដែល​ស្រដៀង​គ្នា​នឹង gradient ។ ខ្ញុំ​ក៏​ឃើញ​បញ្ហា​មួយ ពេល​ដែល​ប្រើ​រូបភាព នៅ​លើ​អាយអ៊ី មិន​អាច​ធ្វើ​ឱ្យ​ជ្រុង​របស់​វា​មូល​​ទេ ។ បញ្ហា​នេះ​អាច​ដោះស្រាយ​ដោយ បង្កើត​ប្រអប់​ផ្ទុក​រូបភាព​មួយ ដាក់​ទំហំ​ឱ្យ​ប៉ុន​រូបភាព និង​ធ្វើ​ឱ្យ​ជ្រុង​ប្រអប់​នោះ​មូល ហើយ​ដាក់​រូបភាព​ជា background ដូច្នេះ​រូប​នឹង​មាន​រាង​មូល​ដែរ ។ បញ្ហា​នេះ​មិន​អាច​ដោះស្រាយ​បាន បើ​ប្រើ​ទាំង border-radius និង box-shadow ឬ text-shadow ។

សូម​អ្នក​ដែល​មាន​បទពិសោធន៍ ជួយ​ដោះស្រាយ​បញ្ហា​នេះ​ឱ្យ​ខ្ញុំ​ផង ខ្ញុំ​ទាល់​គំនិត​ហើយ ។


/* Apply the border radius */
.border-radius {
	-webkit-border-radius: 11px; /* for Safari and Chrome */
	-moz-border-radius: 11px; /* for Firefox 3.5+ */
	-khtml-border-radius: 11px;
	border-radius: 11px;
	behavior: url(includes/border-radius.htc);	/*for IE*/
}

/* Apply box shadow */
.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
	-khtml-box-shadow: 2px 2px 3px #969696;
	box-shadow: 2px 2px 3px #969696;
	
	filter: progid:DXImageTransform.Microsoft.DropShadow(color='#969696', OffX=1, OffY=1);
	-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color='#969696', OffX=1, OffY=1)";
}

/* Apply text shadow */
.text-shadow {
	-webkit-text-shadow: 1px 1px 1px #969696;
	-moz-text-shadow: 1px 1px 1px #969696;
	-khtml-text-shadow: 1px 1px 1px #969696;
	text-shadow: 1px 1px 1px #969696;
	
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', direction=120, strength=1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#969696', direction=120, strength=1)";
}

/* Style for navigation */
#navigation {
	background: url(../images/menu-bg.jpg) repeat-x;
	height: 36px;
	position: relative;
	float: left;		
}

HTML

<div id="navigation" class="border-radius">
        menu list...
</div>

<div id="currentdate" class="border-radius box-shadow text-shadow">
        Display date....
</div>