Me doy cuenta de que IE8 es una molestia cuando se trata de iFRAMES. "Frameborder" está en desuso en HTML5, por lo que si bien es la opción más fácil para IE8, esta no es una solución a largo plazo.
He ocultado correctamente los bordes y las barras de desplazamiento al colocar el iFRAME dentro de un contenedor. El contenedor iFRAME se ubica dentro de un div para el posicionamiento general en la página web. El iFRAME en sí es una posición absoluta y los márgenes negativos se aplican tanto a la parte superior como a la izquierda para ocultar los bordes superior e izquierdo. El ancho y la altura del iFRAME absolutamente posicionado deben codificarse en más del 100%, por lo que excede el tamaño principal hasta el punto en que los bordes derecho e inferior no son visibles (también las barras de desplazamiento no están visibles). Esta técnica también hace que el iFrame responda porque el contenedor iFRAME usa porcentajes, así como el div que contiene el contenedor. Por supuesto, el div principal de iFRAME debe estar configurado como desbordamiento: oculto.
Aquí es un ejemplo de código:
/*THE PARENT DIV FOR THE iFRAME CONTAINER*/
.calcontainer
{
width:100%; /*adjust iFrame shrinking here - if floating use percentage until no white space around image.*/
max-width:200px;
margin:auto;
}
/*THE RELATIVE POSITIONED CONTAINER FOR THE iFRAME*/
.calinside /*container for iFRAME - contents will size huge if the container is not contained and sized*/
{
position:relative; /*causes this to be the parent for the absolute iFRAME*/
padding-bottom: 100%; /* This is the aspect ratio width to height ratio*/
height: 0;
overflow:hidden; /*hides the parts of the iFRAME that overflow due to negative margins and over 100% sizing*/
}
/*THE ABSOLUTE POSITIONED iFRAME contents WITH NEGATIVE MARGINS AND OVER 100% SIZE IS CODED HERE. SEE THE NORMAL SETTINGS VERSUS THE IE8 SETTINGS AS MARKED. A SEPARATE CSS FILE IS NEEDED FOR IE8 WITH A CONDITIONAL STATEMENT IN THE HEAD OF YOUR HTML DOCUMENT/WEB PAGE*/
.calinside iframe
{
position: absolute;
top: 0;
left: 0;
width: 100% !important;/*must expand to hide white space to the right and below. Hidden overflow by parent above*/
height: 103% !important; /*must expand to hide white space to the right and below. Hidden overflow by parent above*/
/*IE8*/top: -2%;
/*IE8*/left: -2%;
/*IE8*/width: 114% !important;/*For IE8 hides right border and scroll bar area that is white*/
/*IE8*/height: 105% !important; /*hide white space and border below. Hidden overflow by parent above*/
}
hicieron u tratar usando 'css'? –