html - sangria - Problema de IE con sangría de texto cuando el tamaño de fuente cambia en un elemento interno
sangria en power point (3)
Estoy diseñando una página con una serie de citas. Cada cita es de la forma:
<blockquote>
<span class="ldquo">“</span>The quote<span class="rdquo">”</span>
<cite>The author</cite>
</blockquote>
La cita debe estar bloqueada por una comilla grande en la parte superior izquierda ( ldquo , absolutamente posicionado) y una grande en la parte inferior derecha ( rdquo , flotada luego relativamente posicionada). El texto de la cita está text-indent -ed para que la comilla de la izquierda no se superponga al texto. En Firefox (3.6) y Chromium (8) esto funciona bien, pero en IE (8) cuando cambio el tamaño de fuente en ldquo parece que el texto-guión se actualiza del tamaño que sería basado en el tamaño de fuente del contenedor al tamaño de ldquo (el primer elemento en el contenedor).
Descubrí que si agrego un <span /> vacío antes de ldquo y actualizo su desplazamiento izquierdo para que coincida con el texto-sangría en el tamaño de fuente del contenedor, funciona en IE pero esto se rompe en Firefox y Chromium que esperan el desplazamiento a la izquierda como una fracción del tamaño de letra de ldquo . No es que eso como una "solución" sería particularmente agradable de todos modos.
A continuación, se incluye un código que recrea el problema:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 20em;
}
blockquote {
margin :0 0 2em 0;
position:relative;
text-indent: 2em;
font-size:0.7em;
text-align:justify;
}
.ldquo, .rdquo {
color: #EC008C;
font-size:3em;
height:0;
top: -0.15em;
}
.ldquo {
position:absolute;
left: -0.6em;
}
.rdquo {
float:right;
position:relative;
left: 0.05em;
}
blockquote cite {
display:block;
font-weight:bold;
text-indent:0;
}
</style>
</head>
<body>
<div id="container">
<blockquote>
<span class="ldquo">“</span>A quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="rdquo">”</span>
<cite>A. Author</cite>
</blockquote>
<blockquote>
<span class="ldquo">“</span>Another quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="rdquo">”</span>
<cite>A. N. Other Author</cite>
</blockquote>
<!-- more quotes -->
</div>
</div>
</body>
</html>
¿Alguien ha visto esto antes y puede ayudarme con una solución? Gracias.
¿Has intentado rellenar-izquierda en lugar de texto-sangrado? Para su blockquote, use un relleno a la izquierda de 1em y cambie el .ldquo para que tenga "left" de solo -0.2em
De acuerdo. Creo que encontré una solución para arreglar el diseño, desafortunadamente no el error.
Quité el texto-sangría y en su lugar agregué un margen derecho apropiado para ldquo que floté a la izquierda. Como la altura de ldquo era cero, esto me devolvió a la situación original con el texto sobre la comilla. Pero agregar una altura mínima de 1px, arreglar eso y cruzar los dedos parece funcionar.
Aquí está el CSS final.
#container {
width: 20em;
}
blockquote {
margin :0 0 2em 0;
position:relative;
font-size:0.7em;
text-align:justify;
}
.ldquo, .rdquo {
color: #EC008C;
font-size:3em;
height:1px;
top: -0.15em;
position:relative;
}
.ldquo {
float:left;
margin-right:0.14em;
}
.rdquo {
float:right;
left: 0.05em;
}
blockquote cite {
display:block;
font-weight:bold;
text-indent:0;
}
Prueba lo siguiente. No estoy seguro de que funcione en todos los navegadores: puede requerir un ajuste extraño para IE (me refiero a lo que no funciona, ¿verdad?) Pero funciona bien en Chrome, por lo que debería funcionar perfectamente en Opera y FF. Es posible que desee ajustar el ancho, etc., pero hace lo que usted desea.
Nueva solución (sin sangría debajo de la cita)
<div style="position: relative;">
<span style="float: left; width: 20px; height: 20px; font-size: 3em; margin-top: -0.25em; margin-left: 0; margin-right: 5px;">“</span>
<p style="text-align: justify;">
fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf
</p>
<span style="float: right; width: 20px; height: 20px; font-size: 3em; margin-top: -0.9em;">”</span>
<div style="clear: both;"></div>
</div>
Vieja solución
<div style="position: relative;">
<span style="float: left; width: 20px; height: 20px; font-size: 3em; margin-top: -0.25em; margin-left: 0; margin-right: 5px;">“</span>
<p style="margin-left: 25px; margin-right: 25px; text-align: justify;">
fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf
</p>
<span style="float: right; width: 20px; height: 20px; font-size: 3em; margin-top: -1em;">”</span>
<div style="clear: both;"></div>
</div>