បញ្ហា 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>

11 thoughts on “បញ្ហា CSS3 Box Shadow ជាមួយ IE

  1. Samady KS ថ្ងៃសុក្រ ទី 9 ខែកក្កដា 2010 / 4:08 ល្ងាច

    មិន​អី​ទេ! កុំ​ភ័យ​ចាំ​ខ្ញុំ​ជួយ​តែ​ត្រូវ​ចាំ​រៀន​ទៅ​ចូល​រៀន​វគ្គ នេះ​​ឡើង​វិញ​សិន​ ព្រោះ​អី​ភ្លេច​អស់​ហើយ

  2. kooms ថ្ងៃសុក្រ ទី 9 ខែកក្កដា 2010 / 4:18 ល្ងាច

    គ្រប់ IE ដែល​តូច​ជាង​ IE9 គឺមិន​ទាន់ស្គាល់ CSS3 យក​ល្អ​បឿន​មិន​បាច់ស្រមោល​ហើយ​ Round Corner សម្រាប់ IE ទេ គឺទុក​អោយ​វា​នៅជ្រុង​ធម្មតា​បាន​ហើយ។
    មិនដឹងថាកូដខាងក្រោម​នេះ​អាច​ជួយ​បឿនអត់ ហើយកូដនេះ​ខ្ញុំ​ប្រើជាមួយ nokorwat.com/news/ ចំនុច​កាច់ជ្រុង​របស់វាមិន​បែកទេ(បឿន​អាច​សាក​ជាមួយ​ IE8 តូច​ជាងនេះ​ខ្ញុំ​មិន​បាន​មើល​ទេ)។

    ​​​.box_shadow{
        -moz-box-shadow: rgba(200,200,200,1) 0 1px 5px;
        -webkit-box-shadow: rgba(200,200,200,1) 0 1px 5px;
        -khtml-box-shadow: rgba(200,200,200,1) 0 1px 5px;
        box-shadow: rgba(200,200,200,1) 0 1px 5px;
    
    /* For IE */
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#cfcfcf, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#dfdfdf, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
        zoom: 1;
    }
    
    

    *** បន្ថែម​មួយ​ចំនុចទៀ សម្រាប់ការ​ប្រើ File ដែលមាន​កន្ទុយ .htc (ក្នុងកូដរបស់បឿន​ខាងលើ behavior: url(includes/border-radius.htc); ) គឺធ្វើអោយ​វេបសាយ​របស់យើង​មិន​មានសុវត្ថិភាពទេ។ ព្រោះកូដនេះ មិន​កូដដើម​របស់ IE ទេ​តែវា​ប្រើសម្រាប់ Hack IE វែបសាយ​ផ្លូវការគេមិន​ប្រើវាទេ ហើយ​ Sever មួយ​ចំនួន​ធំក៏មិន​អនុញ្ញាត​អោយ​យើង​ប្រើវាដែរ។

  3. ទឹម បឿន ថ្ងៃសុក្រ ទី 9 ខែកក្កដា 2010 / 4:53 ល្ងាច

    កូដ​ខាង​លើ CSS3 ប្រើ​ជាមួយ Firefox, Chrome, Safari និង Opera ចំពោះ IE ប្រើ filter វា​ដើរ​តាំង​ពី version 4 និង 5.5 មក ។ ចំពោះ security របស់​ហ្វ័ល htc ខ្ញុំ​យល់​ថា​មិន​មាន​បញ្ហា​ទេ ព្រោះ​កូដ​មាន​តែ​កូដ javascript ធ្វើ​ឱ្យ​ជ្រុង​របស់​ប្រអប់​រាង​មូល ។

    ចំពោះ filter ខាង​លើ ហេតុអី​ប្រើ Dropshadow បី​ដង ហើយ zoom: 1 នោះ​មានន័យ​យ៉ាងម៉េច?

  4. kooms ថ្ងៃសុក្រ ទី 9 ខែកក្កដា 2010 / 5:15 ល្ងាច

    – គឺមាន​កា​ពិភាក្សាច្រើន​ក្រាស់​ក្រែល​ដែរ​តាមតែ​ខ្ញុំ​បាន​មើល​កន្លង​មកទាក់ទង htc ហើយ​គេ​បាននិយាយ​ថា​ htc អាច​បង្កអោយមាន​បញ្ហាខាង​សុវត្ថភាពវែបសាយ ហើយ​តាម​ការសង្កេត​របស់​ខ្ញុំ​ជាច្រើន​ក៏មិន​ប្រើ htcដែរ​ រួមទាំង WordPress, Facebook, Twitter ផងដែរ។
    – Filter តាមពិតទៅត្រូវ​ដាក់​​ដល់ទៅបួន​ឯនោះ គឺខាងលើខាងក្រោមខាងឆ្វេងស្ដាំ ហើយ zoom ក៏មិន​ប្រកដដែរ តែបឿន​អាច​សាក​ទៅដឹងហើយ។

  5. ទឹម បឿន ថ្ងៃសុក្រ ទី 9 ខែកក្កដា 2010 / 6:57 ល្ងាច

    អរគុណ!

    តាម​ខ្ញុំ​ស្មាន wordpress, project គេ​ធំ គេ​មិន​ចង់​រញេរញ៉ៃ​រឿង​អស់​ហ្នឹង ខ្លាច​វា​មាន​បញ្ហា error អី សុខចិត្ត​ទុក​ឱ្យ IE នៅ​ជ្រុងៗ មូល​តែ​ Firefox, Safari, Chrome អី​ទៅ… តែ​សម្រាប់​វិបសាយ​តូចៗ​ដូចនេះ ប្រហែល​មិន​មាន​បញ្ហា​ទេ ។

    ដាក់​កូដ htc ហ្នឹង​ឱ្យ​មើល៖

    
    <script type="text/javascript">
    
    // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
    function findPos(obj) {
    	var curleft = curtop = 0;
    
    	if (obj.offsetParent) {
    		do {
    			curleft += obj.offsetLeft;
    			curtop += obj.offsetTop;
    		} while (obj = obj.offsetParent);
    	}
    
    	return({
    		'x': curleft,
    		'y': curtop
    	});
    }
    
    function oncontentready(classID) {
      if (this.className.match(classID)) { return(false); }
    
    	if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
    
    	this.className = this.className.concat(' ', classID);
    	var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
    	                                this.currentStyle['-webkit-border-radius'] ||
    	                                this.currentStyle['border-radius'] ||
    	                                this.currentStyle['-khtml-border-radius']) /
    	                       Math.min(this.offsetWidth, this.offsetHeight), 1);
    	var fillColor = this.currentStyle.backgroundColor;
    	var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
    	var strokeColor = this.currentStyle.borderColor;
    	var strokeWeight = parseInt(this.currentStyle.borderWidth);
    	var stroked = 'true';
    	if (isNaN(strokeWeight)) {
    		strokeWeight = 0;
    		strokeColor = fillColor;
    		stroked = 'false';
    	}
    
    	this.style.background = 'transparent';
    	this.style.borderColor = 'transparent';
    
    	// Find which element provides position:relative for the target element (default to BODY)
    	var el = this;
    	var limit = 100, i = 0;
    	while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
    		el = el.parentElement;
    		i++;
    		if (i >= limit) { return(false); }
    	}
    	var el_zindex = parseInt(el.currentStyle.zIndex);
    	if (isNaN(el_zindex)) { el_zindex = 0; }
    	//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);
    
    	var rect_size = {
    		'width': this.offsetWidth - strokeWeight,
    		'height': this.offsetHeight - strokeWeight
    	};
    	var el_pos = findPos(el);
    	var this_pos = findPos(this);
    	this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
    	this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;
    
    	var rect = document.createElement('v:roundrect');
    	rect.arcsize = arcSize +'px';
    	rect.strokecolor = strokeColor;
    	rect.strokeWeight = strokeWeight +'px';
    	rect.stroked = stroked;
    	rect.style.display = 'block';
    	rect.style.position = 'absolute';
    	rect.style.top = this_pos.y +'px';
    	rect.style.left = this_pos.x +'px';
    	rect.style.width = rect_size.width +'px';
    	rect.style.height = rect_size.height +'px';
    	rect.style.antialias = true;
    	rect.style.zIndex = el_zindex - 1;
    
    	var fill = document.createElement('v:fill');
    	fill.color = fillColor;
    	fill.src = fillSrc;
    	fill.type = 'tile';
    
    	rect.appendChild(fill);
    	el.appendChild(rect);
    
    	var css = el.document.createStyleSheet();
    	css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
    	css.addRule("v\\:fill", "behavior: url(#default#VML)");
    
    	isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
    	// IE6 doesn't support transparent borders, use padding to offset original element
    	if (isIE6 && (strokeWeight > 0)) {
    		this.style.borderStyle = 'none';
    		this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
    		this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
    	}
    
    	if (typeof(window.rounded_elements) == 'undefined') {
    		window.rounded_elements = new Array();
    
    		if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
    		window.onresize = window_resize;
    	}
    	this.element.vml = rect;
    	window.rounded_elements.push(this.element);
    }
    
    function window_resize() {
    	if (typeof(window.rounded_elements) == 'undefined') { return(false); }
    
    	for (var i in window.rounded_elements) {
    		var el = window.rounded_elements[i];
    
    		var strokeWeight = parseInt(el.currentStyle.borderWidth);
    		if (isNaN(strokeWeight)) { strokeWeight = 0; }
    
    		var parent_pos = findPos(el.vml.parentNode);
    		var pos = findPos(el);
    		pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
    		pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;
    
    		el.vml.style.top = pos.y +'px';
    		el.vml.style.left = pos.x +'px';
    	}
    
    	if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
    }
    </script>
    
    
  6. បុរិន្ទ ថ្ងៃសៅរ៍ ទី 10 ខែកក្កដា 2010 / 10:23 ព្រឹក

    បើដោះមិនចេញទេ ចេញដោះទៅ។ ខ្ញុំមិនយល់ឡើយ បើមានពេលជួយបង្រៀងផង។

  7. បណ្ឌិត ថ្ងៃសៅរ៍ ទី 10 ខែកក្កដា 2010 / 2:13 ល្ងាច

    ស្អីគេវ៉ី ចំណើងជើង”…. ជាមួយ….” ម៉េចមិនដាក់ថា”….ក្នុងIE…” ?

  8. ទឹម បឿន ថ្ងៃអាទិត្យ ទី 11 ខែកក្កដា 2010 / 3:24 ល្ងាច

    ចំណងជើង​ចុចៗ​ឯណា បណ្ឌិត?

  9. សុភា ថ្ងៃអង្គារ ទី 13 ខែកក្កដា 2010 / 6:06 ល្ងាច

    អូយ!!! មើលមិនយល់ទេ។ ឃើញ កូដ ចឹង ចង់វិលមុខហើយ។

  10. sophea ថ្ងៃអង្គារ ទី 20 ខែកក្កដា 2010 / 2:29 ល្ងាច

    ខ្ញុំមានចំងល់មួយចង់សួរថាតើមានវិធីអ្វីដែលអោយwebsit ដែលប្រើUnicode អាចមើលបានដោយមិនចំបាច់install Unicode.

  11. sophea ថ្ងៃអង្គារ ទី 20 ខែកក្កដា 2010 / 2:43 ល្ងាច

    ចំពោះបញ្ហាខាងលើ គឺគ្មានវិធីដោះស្រាយទេ។ ពីព្រោះ IE6 7 8 មិនស្គាល់ CSS3 ទេ។ មានតែ IE9 ឡើងទៅទើបស្គាល់ CSS3

ឆ្លើយ​តប

Fill in your details below or click an icon to log in:

ឡូហ្កូ WordPress.com

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី WordPress.com របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូប Twitter

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Twitter របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូបថត Facebook

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Facebook របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

Google+ photo

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Google+ របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

កំពុង​ភ្ជាប់​ទៅ​កាន់ %s