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

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

Published by ទឹម បឿន

ចែករំលែក ទទួល​ចំណេះដឹង និង កម្សាន្ត

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

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

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

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

  5. អរគុណ!

    តាម​ខ្ញុំ​ស្មាន 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>

ឆ្លើយ​តប

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

Gravatar
ឡូហ្កូ WordPress.com

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

រូប Twitter

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

រូបថត Facebook

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

Google+ photo

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

បោះបង់

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