Tema: HTML5 y CSS3 se ve mal en IE
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/05/2013, 08:21
Avatar de ceaped
ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 9 meses
Puntos: 9
Pregunta HTML5 y CSS3 se ve mal en IE
Buenos días para todos
Se que esta pregunta la han hecho muchas veces y también he encontrado muchas respuestas, pero a mi no me funciona bien ninguna de ellas.

Creo que la mejor manera de explicarlo es poner el HTML5 y los CSS3.

HTML:
Código HTML: 
Ver original
  1. <!--html5-->
  2. <!DOCTYPE html>
  3.  
  4. <html lang="es">
  5.  
  6.     <head>
  7.         <title>TÍTULO</title>
  8.         
  9.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10.         
  11.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  12.         
  13.     </head>
  14.     
  15.     <body>
  16.     
  17.     <header>
  18.         <h1>TÍTULO</h1>
  19.         
  20.         <section class="menu_superior">
  21.         <ul>  
  22.         <li><a href="#">botón 1</a></li>
  23.         <li><a href="#">botón 2</a></li>
  24.         <li><a href="#">botón 3</a></li>
  25.         <li><a href="#">botón 4</a></li>
  26.         <li><a href="#">botón 5</a></li>  
  27.         </ul> 
  28.     </section>
  29.     </header>
  30.     
  31.     <section class="marco_video">
  32.         <video controls="controls" widht="400" height="300">
  33.         <source src="video/mivideo.webm" type="video/webm">
  34.         </video>
  35.     </section>
  36.         
  37.     <nav>
  38.     <div id="menu">
  39.             <div id="centro">
  40.             <div class="item_btn_1"><a href="#"><div class="titulo">Botón 1</div></a></div>
  41.             <div class="item_btn_2"><a href="#"><div class="titulo">Botón 2</div></a></div>
  42.             <div class="item_btn_3"><a href="#"><div class="titulo">Botón 3</div></a></div>
  43.             <div class="item_btn_4"><a href="#"><div class="titulo">Botón 4</div></a></div>
  44.             <div class="item_btn_5"><a href="#"><div class="titulo">Botón 5</div></a></div>
  45.             </div>
  46.       </div>
  47.     </nav>
  48.         
  49.     <section class="menu_inferior">
  50.         <ul>  
  51.         <li><a href="#">Botón 1</a></li>
  52.         <li><a href="#">Botón 2</a></li>
  53.         <li><a href="#">Botón 3</a></li>
  54.         <li><a href="#">Botón 4</a></li>
  55.         </ul> 
  56.     </section>
  57.     
  58.     <footer>pie de pagina</footer>
  59.         
  60.     </body>
  61. </html>

CSS:
Código CSS: 
Ver original
  1. /* Propiedades generales */
  2. h1 {
  3.     font-size: 28px;
  4.     line-height: 30px;
  5.     padding: 10px 0;
  6. }
  7.  
  8. h2 {
  9.     font-size: 23px;
  10.     line-height: 25px;
  11.     padding: 10px 0;
  12. }
  13.  
  14. h3 {
  15.     font-size: 18px;
  16.     line-height: 20px;
  17.     padding: 11px 0;
  18. }
  19.  
  20. p {
  21.     padding-bottom: 22px;
  22. }
  23.  
  24. {
  25.     margin: 0;
  26.     padding: 0;
  27. }
  28. /* Fin Propiedades generales */
  29.  
  30.  
  31. /* Render los elementos HTML5 como un bloque */
  32. header, footer, aside, nav, article {
  33.     display: block;
  34. }
  35.  
  36.  
  37. header {
  38.     display: block;
  39. }
  40.  
  41. header h1 {
  42.     font-family: Arial, Helvetica, sans-serif;
  43.     font-size: 2.5em;
  44.     color: #000000;
  45. }
  46.  
  47. /* Menú superior horizontal */
  48. .menu_superior {
  49.     position: absolute;
  50.     margin-left: 290px;
  51.     top: 25px;
  52. }
  53.  
  54. .menu_superior ul {
  55.     margin: 0 auto;
  56.     width: 960px;
  57.     list-style: none;
  58. }
  59.  
  60. .menu_superior ul li {
  61.     float: left;
  62. }
  63.  
  64. .menu_superior ul li a {
  65.     width: 120px;
  66.     font-size: 12px;
  67.     line-height: 44px;
  68.     text-align: right;
  69.     text-decoration: none;
  70.     color: #543F2A;
  71.     display: block;
  72. }
  73.  
  74. .menu_superior ul li a:hover {
  75.     color: #CE4646;
  76. }
  77.  
  78. .menu_superior ul li.selected a {
  79.     color: #fff;
  80. }
  81. /* Fin Menú superior horizontal */
  82.  
  83. body {
  84.     width: 940px;
  85.     font: 13px/22px Helvetica, Arial, sans-serif;
  86.     background: #EEEDE5;
  87.     margin-top: 0;
  88.     margin-right: auto;
  89.     margin-bottom: 0;
  90.     margin-left: auto;
  91. }
  92.  
  93. /* Menú principal home */
  94. nav {
  95.     width: 300px;
  96.     height: 300px;
  97.     background-color: #EEEDE5;
  98.     float: left;
  99.     margin-top: 100px;
  100. }
  101. /* Fin Menú principal home */
  102.  
  103. /* Marco video home */
  104. .marco_video{
  105.     background-color: #666666;
  106.     height: 300px;
  107.     width: 450px;
  108.     float: right;
  109.     margin-top: 100px;
  110. }
  111. /* Fin Marco video home */
  112.  
  113.  
  114. #centro{
  115.     background-color: #EEEDE5;
  116.     background-repeat: no-repeat;
  117.     background-position: center center;
  118.     height: 276px;
  119.     width: 276px;
  120.     position: relative;
  121.  
  122.     -webkit-border-radius: 300px;
  123.     -moz-border-radius: 300px;
  124.     -o-border-radius: 300px;
  125.     border-radius: 300px;
  126.     border: 12px solid #CCCCCC; 
  127.     /*-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.5);
  128.     -moz-box-shadow: 0 0 50px rgba(0,0,0,0.5);
  129.     -o-box-shadow: 0 0 50px rgba(0,0,0,0.5);
  130.     box-shadow: 0 0 50px rgba(0,0,0,0.5);
  131.     */
  132. }
  133.  
  134. /* Botón 1 */
  135. .item_btn_1{
  136.     background-color: #F9A63E;
  137.     width: 80px;
  138.     height: 80px;
  139.     position: absolute;
  140.     opacity: 100;
  141.     -webkit-border-radius: 100px;
  142.     -moz-border-radius: 100px;
  143.     -o-border-radius: 100px;
  144.     border-radius: 100px;
  145. }
  146.  
  147. .item_btn_1 img{
  148.     border: 0;
  149.     margin: 15px;
  150. }
  151.  
  152. .item_btn_1 a{
  153.     text-decoration: none;
  154. }
  155. /* Fin Botón 1 */
  156.  
  157. /* Botón 2 */
  158. .item_btn_2{
  159.     background-color: #6FC6B0;
  160.     width: 80px;
  161.     height: 80px;
  162.     position: absolute;
  163.     opacity: 100;
  164.     -webkit-border-radius: 100px;
  165.     -moz-border-radius: 100px;
  166.     -o-border-radius: 100px;
  167.     border-radius: 100px;
  168.     margin: 88px;
  169. }
  170.  
  171. .item_btn_2 img{
  172.     border: 0;
  173.     margin: 15px;
  174. }
  175.  
  176. .item_btn_2 a{
  177.     text-decoration: none;
  178. }
  179. /* Fin Botón 2 */
  180.  
  181. /* Botón 3 */
  182. .item_btn_3{
  183.     background-color: #C5D163;
  184.     width: 80px;
  185.     height: 80px;
  186.     position: absolute;
  187.     opacity: 100;
  188.     -webkit-border-radius: 100px;
  189.     -moz-border-radius: 100px;
  190.     -o-border-radius: 100px;
  191.     border-radius: 100px;
  192.     margin: 88px;
  193. }
  194.  
  195. .item_btn_3 img{
  196.     border: 0;
  197.     margin: 15px;
  198. }
  199.  
  200. .item_btn_3 a{
  201.     text-decoration: none;
  202. }
  203. /* Fin Botón 3 */
  204.  
  205. /* Botón 4 */
  206. .item_btn_4{
  207.     background-color: #CE4646;
  208.     width: 80px;
  209.     height: 80px;
  210.     position: absolute;
  211.     opacity: 100;
  212.     -webkit-border-radius: 100px;
  213.     -moz-border-radius: 100px;
  214.     -o-border-radius: 100px;
  215.     border-radius: 100px;
  216.     margin: 88px;
  217. }
  218.  
  219. .item_btn_4 img{
  220.     border: 0;
  221.     margin: 15px;
  222. }
  223.  
  224. .item_btn_4 a{
  225.     text-decoration: none;
  226. }
  227. /* Fin Botón 4 */
  228.  
  229. /* Botón 5 */
  230. .item_btn_5{
  231.     background-color: #543F2A;
  232.     width: 80px;
  233.     height: 80px;
  234.     position: absolute;
  235.     opacity: 100;
  236.     -webkit-border-radius: 100px;
  237.     -moz-border-radius: 100px;
  238.     -o-border-radius: 100px;
  239.     border-radius: 100px;
  240.     margin: 88px;
  241. }
  242.  
  243. .item_btn_5 img{
  244.     border: 0;
  245.     margin: 15px;
  246. }
  247.  
  248. .item_btn_5 a{
  249.     text-decoration: none;
  250. }
  251. /* Fin Botón 5 */
  252.  
  253. .titulo{
  254.     background-color: black;
  255.     color: white;
  256.     font-family: Arial;
  257.     margin-top:-125px;
  258.     opacity: 0;
  259.     
  260.     text-align: center;
  261.     -webkit-border-radius: 100px;
  262.     -moz-border-radius: 100px;
  263.     -o-border-radius: 100px;
  264.     border-radius: 100px;
  265.     -webkit-transition: all 1s;
  266.     -moz-transition: all 1s;
  267.     -o-transition: all 1s;
  268.     -ms-transition: all 1s;
  269.     transition: all 1s;
  270. }
  271.  
  272. /* Opacidad para los títulos */
  273. .item_btn_1:hover .titulo{
  274.     opacity: 0.8;
  275. }
  276.  
  277. .item_btn_2:hover .titulo{
  278.     opacity: 0.8;
  279. }
  280.  
  281. .item_btn_3:hover .titulo{
  282.     opacity: 0.8;
  283. }
  284.  
  285. .item_btn_4:hover .titulo{
  286.     opacity: 0.8;
  287. }
  288.  
  289. .item_btn_5:hover .titulo{
  290.     opacity: 0.8;
  291. }
  292. /* Fin Opacidad para los títulos */
  293.  
  294. /* Posición para cada botón */
  295. .item_btn_1:nth-child(1){
  296.     margin: -50px 0 0 90px;
  297. }
  298.  
  299. .item_btn_2:nth-child(2){
  300.     margin: 20px 0 0 220px;
  301. }
  302.  
  303. .item_btn_3:nth-child(3){
  304.     margin: 200px 0 0 185px;
  305. }
  306.  
  307. .item_btn_4:nth-child(4){
  308.     margin: 200px 0 0 15px;
  309. }
  310.  
  311. .item_btn_5:nth-child(5){
  312.     margin: 20px 0 0 -20px;
  313. }
  314. /* Fin Posición para cada botón */
  315.  
  316.  
  317. /* Menú inferior horizontal */
  318. .menu_inferior {
  319.     width: auto;
  320.     position: relative;
  321.     height: 50px;
  322.     margin-top: 500px;
  323. }
  324.  
  325. .menu_inferior  ul {
  326.     margin: 0 auto;
  327.     width: 960px;
  328.     list-style: none;
  329. }
  330.  
  331. .menu_inferior  ul li {
  332.     float: left;
  333. }
  334.  
  335. .menu_inferior  ul li a {
  336.     width: auto;
  337.     font-size: 12px;
  338.     line-height: 50px;
  339.     text-decoration: none;
  340.     color: #543F2A;
  341.     display: block;
  342.     padding-right: 10px;
  343.     padding-left: 50px;
  344.     height: 50px;
  345.     margin-right: 42px;
  346.     margin-left: 10px;
  347. }
  348.  
  349. .menu_inferior  img {
  350.     position: absolute;
  351.     clip: rect(auto,auto,auto,-20px);
  352.     margin-left: -50px;
  353. }
  354.  
  355. .menu_inferior  ul li a:hover {
  356.     color: #CE4646;
  357. }
  358.  
  359. .menu_inferior  ul li.selected a {
  360.     color: #fff;
  361. }
  362. /* Fin Menú inferior horizontal */
  363.  
  364. /* Pie de página */
  365. footer{
  366.     height: 40px;
  367.     width: 940px;
  368.     margin-top: 25px;
  369.     font-family: Arial, Helvetica, sans-serif;
  370.     font-size: 0.9em;
  371.     color: #AF875F;
  372.     text-align: right;
  373.     line-height: 40px;
  374. }
  375. /* Fin Pie de página */

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario