Selección de texto Resaltado demasiado

Selección de texto Resaltado demasiado en ambos lados debido al relleno.

Ejemplo de selección de texto

http://jsfiddle.net/JamesKyle/pA7BJ/

¿Cómo soluciono esto usando CSS? He probado un montón de cosas diferentes, ninguna de las cuales parece funcionar. (es decir, tratando de usar el margen y otras propiedades).

Me he encontrado con este problema varias veces y nunca he podido resolverlo.

Si alguien pudiera mostrarme cómo solucionar esto y tal vez explicar cómo se calcula el resaltado de selección de texto, se lo agradecería mucho.

Parece que esto no ocurre en Firefox/Opera (no se puede probar IE), y puede estar limitado a navegadores basados ​​en webkit.

SOLUCIONADO

Añada position: relative a cualquier elemento acolchado (es probable que se trate de un error de webkit).

http://jsfiddle.net/JamesKyle/ejfsM/

preguntado el 28 de julio de 12 a las 20:07

¿Qué navegador? En Firefox 14 e IE9, obtengo una selección normal, es decir, solo la forma normal de seleccionar el texto. En Chrome más reciente, obtengo lo que muestra tu imagen. -

Creo que el resaltado lo maneja el navegador. Supongo que estás usando Chrome. Si intenta lo mismo con Firefox, notará que solo se resalta el texto. -

Bien, ¿cómo lo hago consistente en todos los navegadores (incluido el kit web)? -

Esto es bastante extraño, también tengo el mismo problema en Chrome, parece que Chrome resalta todo el ancho del navegador, incluso si coloca otro div dentro de su contenedor con 100% de ancho y alto, todavía lo desborda (aunque no tiene acolchado, etc.). No estoy seguro de una solución para ser honesto. -

Podría ser un error en Webkit. Opera 11.5 tampoco tiene el problema, y ​​no puedo probar Safari (que no se ejecutará en mi computadora, por alguna razón). -

2 Respuestas

Esto es extraño. Sin embargo, cambiar la posición de CSS parece funcionar, por ejemplo:

div.sizing-container {
    padding: 75px;
    position: relative;
}

http://jsfiddle.net/LJLdW/

No sé si eso es posible en tu situación.

Respondido 11 ago 14, 07:08

Ciertamente extraño. Pruébalo configurándolo como dices, luego reiniciando, y todavía funciona. Pruébalo en el h1 y la brecha entre el h1 y primero p aun tiene el problema: jsfiddle.net/pA7BJ/18 - Jared Farrish

Cambiar el acolchado de div.sizing-container a 75px 0px 75px 0px solucionaría este problema. Lo más destacado es tan grande debido al relleno de este elemento.

Entonces necesitas cambiar agregar:

width: 93%;
padding-left: 3%;

Al cuerpo. Y luego agregue un relleno de 10px a .sizing-container

Eso me lo arregla. Esto es todo lo que puedo decir.

Respondido 28 Jul 12, 20:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.