ขอคำแนะนำเรื่องการแสดงผล CSS ใน IE8 ด้วยครับ
การแสดงผลที่ถูกต้อง
การแสดงผลที่ผิดเพี้ยน
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
Date :
2013-09-04 16:36:08
By :
geidtiphong
View :
1812
Reply :
5
ลองดูว่าที่เครื่อง user ได้เปิดใช้งาน compatibility mode หรือเปล่านะครับ
Date :
2013-09-04 20:36:45
By :
Manussawin
ทำอย่างไรไม่ให้ 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
สรุปได้แล้วใช่มั้ยครับ
Date :
2013-09-05 12:08:29
By :
Manussawin
ครับผม
Date :
2013-09-05 13:14:18
By :
geidtiphong
Date :
2013-09-06 06:17:31
By :
mr.win
Load balance : Server 02