ខ្ញុំមានបញ្ហាពេលចង់ប្រើ 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>