ខ្ញុំមានបញ្ហាពេលចង់ប្រើ 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>
មិនអីទេ! កុំភ័យចាំខ្ញុំជួយតែត្រូវចាំរៀនទៅចូលរៀនវគ្គ នេះឡើងវិញសិន ព្រោះអីភ្លេចអស់ហើយ
គ្រប់ IE ដែលតូចជាង IE9 គឺមិនទាន់ស្គាល់ CSS3 យកល្អបឿនមិនបាច់ស្រមោលហើយ Round Corner សម្រាប់ IE ទេ គឺទុកអោយវានៅជ្រុងធម្មតាបានហើយ។
មិនដឹងថាកូដខាងក្រោមនេះអាចជួយបឿនអត់ ហើយកូដនេះខ្ញុំប្រើជាមួយ nokorwat.com/news/ ចំនុចកាច់ជ្រុងរបស់វាមិនបែកទេ(បឿនអាចសាកជាមួយ IE8 តូចជាងនេះខ្ញុំមិនបានមើលទេ)។
*** បន្ថែមមួយចំនុចទៀ សម្រាប់ការប្រើ File ដែលមានកន្ទុយ .htc (ក្នុងកូដរបស់បឿនខាងលើ behavior: url(includes/border-radius.htc); ) គឺធ្វើអោយវេបសាយរបស់យើងមិនមានសុវត្ថិភាពទេ។ ព្រោះកូដនេះ មិនកូដដើមរបស់ IE ទេតែវាប្រើសម្រាប់ Hack IE វែបសាយផ្លូវការគេមិនប្រើវាទេ ហើយ Sever មួយចំនួនធំក៏មិនអនុញ្ញាតអោយយើងប្រើវាដែរ។
កូដខាងលើ CSS3 ប្រើជាមួយ Firefox, Chrome, Safari និង Opera ចំពោះ IE ប្រើ filter វាដើរតាំងពី version 4 និង 5.5 មក ។ ចំពោះ security របស់ហ្វ័ល htc ខ្ញុំយល់ថាមិនមានបញ្ហាទេ ព្រោះកូដមានតែកូដ javascript ធ្វើឱ្យជ្រុងរបស់ប្រអប់រាងមូល ។
ចំពោះ filter ខាងលើ ហេតុអីប្រើ Dropshadow បីដង ហើយ zoom: 1 នោះមានន័យយ៉ាងម៉េច?
– គឺមានកាពិភាក្សាច្រើនក្រាស់ក្រែលដែរតាមតែខ្ញុំបានមើលកន្លងមកទាក់ទង htc ហើយគេបាននិយាយថា htc អាចបង្កអោយមានបញ្ហាខាងសុវត្ថភាពវែបសាយ ហើយតាមការសង្កេតរបស់ខ្ញុំជាច្រើនក៏មិនប្រើ htcដែរ រួមទាំង WordPress, Facebook, Twitter ផងដែរ។
– Filter តាមពិតទៅត្រូវដាក់ដល់ទៅបួនឯនោះ គឺខាងលើខាងក្រោមខាងឆ្វេងស្ដាំ ហើយ zoom ក៏មិនប្រកដដែរ តែបឿនអាចសាកទៅដឹងហើយ។
អរគុណ!
តាមខ្ញុំស្មាន wordpress, project គេធំ គេមិនចង់រញេរញ៉ៃរឿងអស់ហ្នឹង ខ្លាចវាមានបញ្ហា error អី សុខចិត្តទុកឱ្យ IE នៅជ្រុងៗ មូលតែ Firefox, Safari, Chrome អីទៅ… តែសម្រាប់វិបសាយតូចៗដូចនេះ ប្រហែលមិនមានបញ្ហាទេ ។
ដាក់កូដ htc ហ្នឹងឱ្យមើល៖
បើដោះមិនចេញទេ ចេញដោះទៅ។ ខ្ញុំមិនយល់ឡើយ បើមានពេលជួយបង្រៀងផង។
ស្អីគេវ៉ី ចំណើងជើង”…. ជាមួយ….” ម៉េចមិនដាក់ថា”….ក្នុងIE…” ?
ចំណងជើងចុចៗឯណា បណ្ឌិត?
អូយ!!! មើលមិនយល់ទេ។ ឃើញ កូដ ចឹង ចង់វិលមុខហើយ។
ខ្ញុំមានចំងល់មួយចង់សួរថាតើមានវិធីអ្វីដែលអោយwebsit ដែលប្រើUnicode អាចមើលបានដោយមិនចំបាច់install Unicode.
ចំពោះបញ្ហាខាងលើ គឺគ្មានវិធីដោះស្រាយទេ។ ពីព្រោះ IE6 7 8 មិនស្គាល់ CSS3 ទេ។ មានតែ IE9 ឡើងទៅទើបស្គាល់ CSS3