ขอความกระจ่างเกี่ยวกับ CSS ครับ

srenon · 14 พฤษภาคม 2011, 14:29:31

พอดัจะทำกรอบ ที่มี ขอบมนๆ แบบ CSS หน่อย แต่พอทำเสร็จกลับใช้บน IE ไม่ได้สะงั้นแต่บน Browser อื่นๆนั้นปกติดี ครับ โค๊ดด้านล่างใครรู้ช่วยตอบที

โค้ด เลือก

#content #content_title {  padding: 10px; border-radius: 5px 0 0 15px; -moz-border-radius: 5px 0 0 15px; -webkit-border-radius: 5px 0 0 15px; margin-bottom: 5px; font-weight: bold; }

ru · 14 พฤษภาคม 2011, 14:36:03

IE ไม่รองรับคำสั่ง border-radius ครับ อะไรที่ชาวบ้านเค้าทำได้ อย่าไปหวังลมๆแล้งๆกับ IE ครับ

srenon · 14 พฤษภาคม 2011, 14:37:14

มีวิธีแก้ใหม ครับ หรือวิธีอื่นก้ได้ที่ทำกรอบแบบ โค้งๆ

ninjakakachi · 14 พฤษภาคม 2011, 14:39:02

เห็น microsoft บอกว่า IE10 จะอ่าน CSS3 เหมือนชาวบ้านซักที

kobkung · 14 พฤษภาคม 2011, 14:39:33

ใส่ background รูปแทน ie ชอบเป็นแบบนี้ล่ะ เบื่อ

ru · 14 พฤษภาคม 2011, 14:39:57

วิธีแก้มีไหมตอบว่ามีครับ
ก็ใช้วิธีใส่รูปขอบมนเอาจะดีกว่าครับ รองรับทั้ง IE6-8 ครับ

srenon · 14 พฤษภาคม 2011, 14:47:29

ขอบคุณมากครับทุกๆท่าน เพิ่งหัดเล่น CSS จะพยายามต่อไป ได้เมื่อรั่ยจะมาบอกคาฟฟฟฟ

RaulGonzales · 14 พฤษภาคม 2011, 14:50:56

ie 6 7 8 ไม่ลองรับ

ตัดเป็นรูปง่ายสุด

srenon · 14 พฤษภาคม 2011, 14:57:20

เท่าที่ดู IE 9 ก็ไม่รองรับนะครับทดสอบแล้ว

srenon · 14 พฤษภาคม 2011, 15:19:31

ได้ละครับลองโหลดตัวอย่างนี้ไปดูนะ รองรับทุก IE http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

googlerich · 14 พฤษภาคม 2011, 15:32:50

ถึง IE จะมีคนใช้มากที่สุด ผมทำเว็บ ก็ไม่ใช้ IE เป็น Base ชอบ Chrome Firefox ส่วน IE ชั่งแ... โหลดช้า เปลื่องแรม เรื่องเยอะ

srenon · 14 พฤษภาคม 2011, 15:39:26

อ้างถึงจาก: srenon ใน 14 พฤษภาคม 2011, 15:19:31
ได้ละครับลองโหลดตัวอย่างนี้ไปดูนะ รองรับทุก IE http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

จากการทดสอบ ตัวอย่างด้านบนนะครับ ปรากฏว่าได้ผลครับ แก้ดังนี้

โค้ด เลือก


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

แค่นั้นแระ ฮาๆ

ตัวอย่าง CSS

โค้ด เลือก

<style type="text/css">

.box1 {
	background-color: #f0f0f0;
	width: 533px;
	height: 50px;
	margin: 0 auto 15px auto;
	padding: 30px;
	border: 1px solid #d7d7d7;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(border-radius.htc);
}
</style>

ตัวอย่างการเรียกใช้งาน

โค้ด เลือก

		<div class="box1">
			lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet 
		</div>

ru · 14 พฤษภาคม 2011, 15:47:00

ทดสอบผ่านโปรแกรมอะไรครับ ในกรณีที่ทดสอบ IE6-7-8 ครับ

saparee · 14 พฤษภาคม 2011, 16:05:35

ไปเจอเว็บนอกมาครับ ใช้ CSS + jQuery เปิดด้วย IE แล้วผ่าน ขอบโค้งสวยเลยครับ

โค้ด เลือก

http://jquery.malsup.com/corner/

แต่..

พอเอามาลองทำเองแล้วไม่เห็นจะได้แบบตัวอย่างเลย

thai2ads · 14 พฤษภาคม 2011, 16:08:44

ทำใจกับตระกูล IE ทั้งหลายแต่ก็เลี่ยงไม่ได้

bonshington · 14 พฤษภาคม 2011, 16:15:32

เป็นเพราะ IE ยังไม่รอบรับการแสดง border แบบโค้ง ผมเข้าใจว่า IE9 น่าจะแสดงขอบโค้งได้
ทางแก้ ก็คงเหมือนที่คุณ saparee บอกไว้ ใช้ .corner ช่วย แต่ .corner มันจะไม่เวิร์คกับพวกที่ background เป็นรุป เพราะ .corner มันจะสร้างจุดด้วยสีที่เรากำหนด มาหลอกให้ดูโค้งเนียน

saparee · 14 พฤษภาคม 2011, 16:27:35

ตามที่ผมเขียนไว้ที่ rep ก่อน แวะมาบอกว่าตอนนี้ทำได้แล้วนะครับ (สาเหตุเพราะชี path jquery ผิด แหะๆ

)

อ้างถึงจาก: bonshington ใน 14 พฤษภาคม 2011, 16:15:32
เป็นเพราะ IE ยังไม่รอบรับการแสดง border แบบโค้ง ผมเข้าใจว่า IE9 น่าจะแสดงขอบโค้งได้
ทางแก้ ก็คงเหมือนที่คุณ saparee บอกไว้ ใช้ .corner ช่วย แต่ .corner มันจะไม่เวิร์คกับพวกที่ background เป็นรุป เพราะ .corner มันจะสร้างจุดด้วยสีที่เรากำหนด มาหลอกให้ดูโค้งเนียน

ถูกต้องครับ

และนี่คือตัวอยางที่ผมเอาไปใช้นะครับ

โดยสังเกตดีๆจะเห็นว่าผมใช้ bg เป็นรูป แล้วกำหนดส่วนโค้งเป็นพื้นสีที่ใกล้เคียงกับรูปเช่นกันครับ

ลองประยุกต์ใช้ดูนะครับ

ปล. ผมลองแล้ว IE is WORK!!

srenon · 14 พฤษภาคม 2011, 16:38:11

อ้างถึงจาก: ru ใน 14 พฤษภาคม 2011, 15:47:00
ทดสอบผ่านโปรแกรมอะไรครับ ในกรณีที่ทดสอบ IE6-7-8 ครับ

IE 9 ครับ