Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > ขอคำแนะนำเรื่องการแสดงผล CSS ใน IE8 ด้วยครับ



 

ขอคำแนะนำเรื่องการแสดงผล CSS ใน IE8 ด้วยครับ

 



Topic : 100039



โพสกระทู้ ( 889 )
บทความ ( 11 )



สถานะออฟไลน์
Facebook Blogger



การแสดงผลที่ถูกต้อง

complete

การแสดงผลที่ผิดเพี้ยน

error

Code CSS ครับ

Code
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 100%;
    height: 100%;
	margin: 0px;
	background-color: #f0eeee;
}

div#head {
	width: 100%;
	height: 49px;
	background-image: url(_Img/_ImgUI/Head_bg.png);
	background-repeat: repeat-x;
}

div#banner {
	padding-top: 10px; 
	margin-left: 5px;
	float: left; 
}

div#intra {
	width: 114px; 
	height: 12px; 
	margin-top: 5px;
	float: right;
	background-image: url("_Img/_ImgUI/int_app.png"); 
}

div#log_info {
	margin-left: 5px;
	margin-top: 20px;
	position: absolute;
}

div#main_menu {
	margin-top: -20px;
	margin-right: 50px;
}

div#content {
	margin-top: 55px;
	text-align: center;
}

div#top_content {
	margin-top: 10px;
	margin-right: 10px;
	text-align: right;
	font-weight: bold;
	color: #06C;
}

div#page_pg {
	margin: 3px 3px 3px 3px;
	float: left;
}

/* css style aboute form application */
form#app_schedule {
	text-align: left;
}

label {
	width: 130px; 
	font-weight: bold; 
	text-align: right; 
	display: inline-block;
}

input[type="text"], input[type="file"] {
	margin-top: 3px;
	padding: 2px;
	width: 350px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	border: solid 1px #ccc;
}

input[type="password"] {
	margin-top: 3px;
	padding: 2px;
	width: 350px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	border: solid 1px #ccc;
}

select {
	margin-top: 3px;
	padding: 2px;
	width: 200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

textarea {
	margin-top: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	border: solid 1px #CCC;
}

.focus {
	background-color: #E0FFFF;
	border: solid 1px #1E90FF !important;
}

div#app_menu {
	margin-left: 5px;
	margin-bottom: 3px;
	color: #06C;
	text-align: left;
}

.btn_app {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	cursor: pointer;
}

/***********************************************************/

/* css style hr */
hr {
	height: 1px;
	width: 99%;
	color: #ccc;
	background-color: #ccc;
    border: none;
}

/* css style aboute table */
.txt_centered {
	text-align: center;
}

.txt_left {
	text-align: left;
}

.txt_right {
	text-align: right;
}

div#page_paging {
	margin-top: 10px; 
	margin-right: 5px;
	float: right;
	text-align: left;
}

.a_box {
	padding: 5px;
	margin: 5px;
}

.btn_paging {
	width: 35px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	cursor: pointer;
}

.h_tb {
	color: #FFF;
	background-color: #06C;
	height: 30px;
}

.row1 {
	height: 25px;
	background-color: #fff;
}

.row2 {
	height: 25px;
	background-color: #F5FFFA;
}

.col {
	padding: 2px;
	height:20px;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

.end_col {
	border-right: solid 1px #ccc;
}

.hilight {
	background-color: #FFF8C6 !important;
	cursor: default;
}

.chkhilight {
	background-color: #EDE275;
	cursor: default;
}

.hilight_click {
	background-color: #FF6347;
	cursor: default;
}
/***********************************************************/

/* css style footer page */
.Footer {
	width: 100%;
	height: 15px;
	position: fixed;
	left: 0px;
	bottom: 0px;
	font-size: 12px;
	color: #000;
	text-align: center;
	z-index: 99;
}

/* css style aboute iframe */
.col_style {
	height: 25px;
	font-family: Arial;
	font-size: 12px;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

/* css style message box */
.msg_style {
	margin-top:50px;
	padding:10px;
	width:200px;
	font-weight: bold;
	color: #F00;
	background-color:#fff;
	border: solid 1px #ccc;
	border-radius: 5px;
}

/* css style link pagging page */
.link_page {
	color: #666;
	text-decoration: none;
}

/* css style link menu */
.linkmenu a:link {color:#000;font-size:12px;text-decoration:none;}
.linkmenu a:visited {color:#000;font-size:12px;text-decoration:none;}
.linkmenu a:hover {color:#06C;font-size:12px;text-decoration:underline;}
.linkmenu a:active {color:#06C;font-size:12px;text-decoration:underline;}
.linkmenu a:focus{outline:none;font-size:12px;}

/* css style link action */
.linkaction a:link {color:#CCC;text-decoration:none;}
.linkaction a:visited {color:#CCC;text-decoration:none;}
.linkaction a:hover {color:#06C;text-decoration:underline;}
.linkaction a:active {color:#06C;text-decoration:underline;}
.linkaction a:focus{outline:none;}

/* jquery autocomplete */
.ui-autocomplete {
	width: 550px;
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}
/***********************************************************/

/* css style indigator jquery autocomplete */
.indigator {
	background: url("_Img/_ImgIndigator/ui-anim.gif") no-repeat right center;
}

.icon_src {
	background: url("_Img/_ImgBtn/btn_find.png") no-repeat right center;
}

/* css style dialog modal */
.th_dialog {
	height: 30px;
	background-color: #FFF8C6;
}

.col_dialog {
	padding: 2px;
	font-size: 12px;
	color: #F00;
	border-bottom: dotted 1px orange;
	border-left: dotted 1px orange;
}

.row_dialog1 {
	background-color: #fff;
}

.row_dialog2 {
	background-color: #FFF8C6;
}

.hilight_dialog {
	background-color: #EEF3E2 !important;
}

/* css style aboute link menu */
.btn_menu {
	padding: 15px;
	margin: 3px;
	text-decoration: none;
	color: #000;
	background-color: #eee;
	border: solid 1px #ccc;
}

.btn_active {
	padding: 15px;
	margin: 3px;
	text-decoration: none;
	color: #008B8B;
	background-color: #FFEFDB;
	border: solid 1px #ccc;
}

.btn_submenu {
	color:#008B8B;
}

.btn_submenu a:hover {
	color:#008B8B;
	background-color: #FFEFDB; 
	text-decoration: underline;
}

.btn_box {
	padding: 5px;
	margin: 5px;
	text-decoration: none;
	color: #000;
	background-color: #FFEFDB;
	border: solid 1px #ccc;
	cursor: pointer;
}

 a:hover.btn_box {
	color: #008B8B;
	text-decoration: underline;
}

/***********************************************************/

/* box feedback after process */
.box_feedback {
	padding: 15px;
	margin-top: 90px;
	margin-left: 500px;
	display: none;
	position: fixed;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	width: 200px;
	color: #000;
	background-color: #FFEFD5;
	border: solid 2px #EE2C2C;
	border-radius: 5px;
}

.box_rows {
	padding: 15px;
	margin-top: 90px;
	margin-left: 500px;
	position: fixed;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	width: 200px;
	color: #000;
	background-color: #FFEFD5;
	border: solid 2px #EE2C2C;
	border-radius: 5px;
}



ภาพที่แสดงผลถูกต้องผมรันใน xampp ครับ แต่ภาพที่แสดงผลผิดเพี้ยนแสดงผลที่ web service ครับ แต่ที่ผมมาตั้งคำถามก็เพราะ เครื่องลูกข่ายบางเครื่องสามารถแสดงผลได้ถูกต้อง แต่บางเครื่องแสดงผล ผิดเพี้ยนครับ ทั้งๆที่ ใช้ IE8 version เดียวกันทั้ง Office ครับ รบกวนช่วยแนะนำด้วยนะครับผม



Tag : PHP, HTML/CSS







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2013-09-04 16:36:08 By : geidtiphong View : 1765 Reply : 5
 

 

No. 1



โพสกระทู้ ( 2,249 )
บทความ ( 5 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

ลองดูว่าที่เครื่อง user ได้เปิดใช้งาน compatibility mode หรือเปล่านะครับ

test






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-09-04 20:36:45 By : Manussawin
 


 

No. 2



โพสกระทู้ ( 889 )
บทความ ( 11 )



สถานะออฟไลน์
Facebook Blogger

ทำอย่างไรไม่ให้ Internet Explorer View ใน Compatible Mode ได้

บางที่เวลาเราเขียน Code html และเช็คบน IE8 แล้วก็ดู Layout ไม่มีปัญหาอะไร แต่พอส่งงานลูกค้า ลูกค้ากลับบอกว่าทำไม Layout มันเพี้ยน ก็มานั่งงงกันว่าแล้วทำไมหละ เราเช็คกันทุกเครื่องแล้วยังไม่เห็นจะเป็นแบบที่ลูกค้าส่งมาเลย ปรากฏว่า ลูกค้าไปดูใน Mode Compatible Mode ซึ่ง Internet Explorer ตั้งแต่ Version 7 ขึ้นไปจะมี Option นี้อยู่ซึ่งบางทีมันถูก set ว่าถ้าอยู่ในวง Intranet ให้ดู Compatible Mode เสมอซึ่ง Default มันจะเปลี่ยนตัวเองเป็น IE Version 6 ซึ่งเดี๋ยวนี้เขาไม่ใช่กันแล้วจึงทำให้บางที Layout ที่เราเขียน Code ไว้มันเพี้ยน อ้าวแล้วงีจะแก้อย่างไงหละ ก็ของตูมันไม่เป็นนี้หว่า ปรากฏว่าหาไปหามาเจอว่าเราสามารถใส่ Meta tag ตัวหนึ่งใน HTML Code ของเราว่า Compatible โหมดที่จะให้ดูจะให้เป็น IE Version อะไรตามตัวอย่างดังนี้ครับ​

<head>
<title>My Site</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

ตัวอย่างนี้ เมื่อใส่ไว้จะหมายถึงเมื่อ View แบบ Compatible Mode IE จะแปลงเป็น Version ล่าสุดที่ผู้เปิดมี ฉะนั้นเมื่อใส่บรรทัดนี้ไปปุ่ม Compatible Mode ของ IE ก็จะหายไป หมายถึงผู้เข้าชมก็จะกดไปได้เหมือนเรา Lock มันไว้แล้ว

มี Tip นิดหนึ่งตัวเจอกับตัวเอง Meta Tag นี้จะต้องใส่ไว้หลัง tag title หรือ หลัง tag head เลยยิ่งดีครับเพราะผมลองแล้วถ้าใส่ไว้ใน Tag Head ก็เถอะไปใส่ล่างๆ หลังพวก Javascript IE มันก็ดันมองไม่เห็นซะนี้

อ่านมาครับคิดว่าเป็นประโยชน์ก็เลยแชร์ต่อครับ

credit : http://www.thaibeginner.com
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-09-05 11:34:35 By : geidtiphong
 

 

No. 3



โพสกระทู้ ( 2,249 )
บทความ ( 5 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

สรุปได้แล้วใช่มั้ยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-09-05 12:08:29 By : Manussawin
 


 

No. 4



โพสกระทู้ ( 889 )
บทความ ( 11 )



สถานะออฟไลน์
Facebook Blogger

ครับผม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-09-05 13:14:18 By : geidtiphong
 


 

No. 5



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-09-06 06:17:31 By : mr.win
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอคำแนะนำเรื่องการแสดงผล CSS ใน IE8 ด้วยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่