Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zaokrąglone rogi w IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Adshi
3.05.2011, 16:07:07
Witam,
na Forum o Minecraft jest pewien problem. Otóż forum pod IE nie wczytuję się poprawnie (nie ma zaokrągleń). Znacie może jakiegoś hacka, aby to naprawić?

Przykładowy DIV, który nie działa pod Internet Exploler:
[HTML] pobierz, plaintext 
  1. .tborder {
  2. background: #c6c6c6;
  3. background-clip: padding-box;
  4. -moz-background-clip: padding;
  5. width: 100%;
  6. margin: auto auto;
  7. padding: 8px 8px;
  8. /*border: 1px solid #0F5C8E;*/
  9. border-width: 8px;
  10. -o-border-image: url(images/cg/style/border.png) 8 8 8 8 round stretch;
  11. -webkit-border-image: url(images/cg/style/border.png) 8 8 8 8 round stretch;
  12. -moz-border-image: url(images/cg/style/border.png) 8 8 8 8 round stretch;
  13. -webkit-box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  14. -moz-box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  15. box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
  16. color: #404040;
  17. }
[HTML] pobierz, plaintext


Pozdrawiam!
MrCoody
3.05.2011, 17:05:05
w IE trzeba obrazkami zaraz dam ci kod w css i obrazki

KOD style.css

[CSS] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body {background : #ff0000;}
  4.  
  5.  
  6. #paczucha {
  7. 	position: relative;
  8. 	width: 300px;
  9. 	height: 150px;
  10. 	background: white;
  11. }
  12.  
  13. .tl {
  14. 	position: absolute;
  15. 	top: 0;
  16. 	left: 0
  17. }
  18.  
  19. .tr {
  20. 	position: absolute;
  21. 	top: 0;
  22. 	right: 0
  23. }
  24.  
  25. .bl {
  26. 	position: absolute;
  27. 	bottom: 0;
  28. 	left: 0
  29. }
  30.  
  31. .br {
  32. 	position: absolute;
  33. 	bottom: 0;
  34. 	right: 0
  35. }
[CSS] pobierz, plaintext


KOD index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Zaokrąglone rogi - by Hubert</title>
  6. <link id="topstyle" rel="stylesheet" type="text/css" href="styl.css" />
  7. </head><body>
  8. <div id="paczucha"> <img src="tl.png" class="tl">  <img src="tr.png" class="tr">  <img src="bl.png" class="bl">  <img src="br.png" class="br"></div>
  9.  
  10. </body>
  11. </html>
[HTML] pobierz, plaintext


obrazki zaraz dam biggrin.gif
batman
3.05.2011, 17:24:50
Cytat(MrCoody @ 3.05.2011, 18:05:05 ) *
w IE trzeba obrazkami zaraz dam ci kod w css i obrazki

Nie trzeba. Dla IE9 można skorzystać z border-radius, a dla wcześniejszych VML - http://www.dillerdesign.com/experiment/DD_roundies/
MrCoody
3.05.2011, 17:36:01
OBRAZEK 1
http://zapodaj.net/ac7f8fff2fa6.png.html

OBRAZEK 2
http://zapodaj.net/543218e01452.png.html

OBRAZEK 3
http://zapodaj.net/fd9c051795e8.png.html

OBRAZEK 4
http://zapodaj.net/6bf4f838f4e9.png.html


prościej jest obrazkami tongue.gif
batman
3.05.2011, 18:41:56
Cytat(MrCoody @ 3.05.2011, 18:36:01 ) *
prościej jest obrazkami tongue.gif

Uwierz mi, nie jest smile.gif
mlawnik
3.05.2011, 19:58:49
Też się kiedyś w to bawiłem i uznałem, że nie warto.

BTW:
Cytat ze strony @batmana:
Cytat
This cannot be used on the <BODY> element, due to next/previousSibling DOM relationships.
<TABLE>, <TR>, <TD>, <SELECT>, <OPTION>, <TEXTAREA> elements do not play nicely yet. Do not attempt.
This script does not address background-position: fixed; functionality.
"Fixed" <IMG/> elements must take on visibility:hidden;, and thus become unclickable. I see no workaround other than using clear pixel GIF replacements, and that is code that I am not going to write.
<INPUT type="image"/> nodes are not supported. The node with the original PNG SRC must take on visibility:hidden;
Testing for PNG image presence is done by Javascript string search. If you have a URL that doesn't end in .png, you're not in luck. I suppose I could add a 'force' option - let me know if you need it.
The corners will sometimes revert to square in WebKit. Examine your padding versus your border-radius - WebKit will cut things short if the radius is bigger than the padding value.
IE8 beta 2 is incredibly slow at implementing this, and lacks background images.

vokiel
3.05.2011, 21:08:14
http://css3pie.com/
Adshi
4.05.2011, 14:54:23
Porównajcie forum z IE, a inną (dobrą) przeglądarką. Wiecie może co jest nie tak?

Forum Minecraft
hieroshima
13.05.2011, 09:36:37
Nie warto starać się o idealny wygląd strony dla przeglądarek IE <= 7
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.