¿Cómo me deshago del desplazamiento de un elemento usando CSS?


88

Tengo un problema de posicionamiento con algunos elementos, al inspeccionarlo IE8 Developer tools me muestra esto:

¿De dónde viene la compensación?

Ahora estoy bastante seguro de que mi problema es ese desplazamiento 12, pero ¿cómo lo elimino ? No puedo encontrar ninguna mención de una propiedad de compensación CSS. ¿Necesitamos una compensación además del margen?

Aquí está el código que produce esto:

 <div id="wahoo" style="border: solid 1px black; height:100px;">

    <asp:TextBox ID="inputBox" runat="server" />

    <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;"  tabindex="99" />

    <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
       <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />               
    </div>

</div>

El elemento con el desplazamiento es inputBox


¿Está tu elemento posicionado? Compruebe lefty toppropiedades.
jessegavin

6
Un pequeño código sería muy útil aquí. No hay una regla de 'compensación' en CSS, pero IE tiene una tendencia a agregar píxeles aleatorios en lugares aleatorios. Por lo general, tiene que ver con flotadores y posicionamiento
Alex

Asumiría que 'desplazamiento' es 'píxeles relacionados con otros elementos', como un margen en un elemento anterior que empuja este hacia abajo. No tengo tiempo para experimentar con las herramientas de desarrollo de IE ahora para averiguarlo.
Quentin


¿Hay un ejemplo de página web que podamos ver de esto? Por ejemplo, para que podamos señalarlo y entender la página más amplia. Por ejemplo, ¿su control de entrada hereda el margen o el relleno de otra definición css?
Kris C

Respuestas:


43

Ese desplazamiento es básicamente la posición x, y que el navegador ha calculado para el elemento en función de su atributo css de posición. Entonces, si pones un <br>antes o cualquier otro elemento, cambiaría el desplazamiento. Por ejemplo, puede establecerlo en 0 mediante:

#inputBox{position:absolute;top:0px;left:0px;}

o

#inputBox{position:relative;top:-12px;left:-2px;}

Por lo tanto, cualquier problema de posicionamiento que tenga, no es necesariamente un problema de desplazamiento, aunque siempre puede solucionarlo jugando con los atributos superior, izquierdo, derecho e inferior.

¿Es su problema la incompatibilidad del navegador?


2
Consulte también el comentario de Stony sobre la alineación vertical. Parece preferible corregir la configuración de alineación que anular por la fuerza la posición del elemento en el navegador.
Jeremy Condit

33

Para mí, fue vertical-align: baselinevs lo vertical-align: topque causó el desplazamiento superior.

Intenta configurar vertical-align: top


2
Esto es mejor que usar el posicionamiento absoluto
usuario1

2
Su respuesta es asombrosa, el hecho de que tenga que configurar la alineación vertical cuando tengo 4 divs de bloques en línea que se niegan a alinearse es toro. Terminaste horas de trabajo. Gracias.
Corey Ogburn

Trabajado con <button>incrustado en un <li>elemento.
Amessihel

9

Arreglo rapido:

position: relative;
top: -12px;
left: -2px;

esto debería equilibrar esas compensaciones, pero tal vez debería echar un vistazo a su diseño completo y ver cómo ese cuadro interactúa con otros cuadros.

En cuanto a la terminología, left, right, topy bottomson CSS compensados propiedades. Se utilizan para colocar elementos en una ubicación específica (cuando se usan con absoluteo fixedposicionar), o para moverlos en relación con su ubicación predeterminada (cuando se usan con relativeposicionamiento). Los márgenes, por otro lado, especifican espacios entre cuadros y, a veces, se colapsan, por lo que no se pueden usar de manera confiable como compensaciones.

Pero tenga en cuenta que, en su caso, es posible que ese desplazamiento no se calcule (únicamente) a partir de los desplazamientos de CSS.


Eso solo mueve el espacio en blanco al otro lado del elemento.
Quentin

@David ¿Qué espacios en blanco? ¿Y por qué se movería cualquier otra cosa que no sea la casilla objetivo?
Alin Purcaru

El espacio en blanco es un espacio que no tiene nada. Las cosas que no sean la caja de destino no se moverían, ese es el punto. Si tiene algo 1 px abajo y sube 12 px, entonces es 13 px abajo en lugar de 1 px.
Quentin

2
@David Puede que no tengamos la misma definición de espacios en blanco, pero entiendo lo que estás tratando de decir. Estoy de acuerdo en que la brecha se moverá al otro lado. Etiqueté la solución como una "solución rápida" porque puede ser utilizable o no. Es lo único que puedo sugerir hasta que el autor de la pregunta proporcione más detalles.
Alin Purcaru

3

Establecer las propiedades superior e izquierda en valores negativos podría no ser una buena solución si su problema es simplemente que está en modo peculiar. Esto puede suceder si a la página le falta una <!DOCTYPE>declaración, lo que hace que se represente en modo peculiar en IE8. En las herramientas de desarrollo de IE8, asegúrese de que "Modo de peculiaridades" no esté seleccionado en "Modo de documento". Si está seleccionado, es posible que deba agregar la <!DOCTYPE>declaración correspondiente .


2

Si está utilizando las herramientas de desarrollo de IE, asegúrese de no haberlas dejado accidentalmente en una configuración anterior. Me estaba volviendo loco con este mismo problema hasta que vi que estaba configurado para los estándares de Internet Explorer 7. Lo cambió a los estándares de Internet Explorer 9 y todo encajó en su lugar.


1
Algunos de nosotros tenemos usuarios todavía en IE7.
15ee8f99-57ff-4f92-890c-b56153

2

mover elemento arriba: -12px o colocarlo en absoluto no resuelve el problema, solo lo enmascara

Tuve el mismo problema: verifique si tiene en un elemento envolvente mezclado: elementos flotantes con elementos no flotantes: mi elemento no flotante causó este extraño desplazamiento al flotante


En mi caso, estaba tratando de hacer coincidir el aspecto de un sitio web con el de un prototipo. Tenía una fila de divs de bloques en línea con el mismo ancho que el prototipo, pero mis compensaciones estaban desfasadas en 4. Descubrí que tenía una combinación de divs flotantes y no flotantes en el sitio web. Hacerlos todos flotantes eliminó el desplazamiento adicional. Esto fue especialmente desconcertante porque no pude ver muchas más diferencias entre el CSS.
Clint Brown

1

definir margen y relleno para el elemento enfrenta el problema:

#element_id {margin: 0; padding: 0}  

y vea si existe el problema. IE procesa la página con una herencia más no deseada. deberías evitar que lo haga.


1

Esto parece extraño, pero se puede tratar entorno vertical-align: topen el CSSde las entradas. Eso lo arregla en IE8, al menos.


1

Tuve el mismo problema en nuestro sitio web basado en .NET, que se ejecutaba en DotNetNuke (DNN) y lo que me resolvió fue básicamente un simple restablecimiento de margen de la etiqueta del formulario. Los sitios web basados ​​en .NET a menudo se envuelven en un formulario y, sin restablecer el margen, puede ver el extraño desplazamiento que aparece a veces, principalmente cuando se incluyen algunos scripts.

Entonces, si está tratando de solucionar este problema en su sitio, intente ingresar esto en su archivo CSS:

form {
  margin: 0;
}

Tuve el mismo problema y cambiar el margen del formulario también funcionó para mí.
David Derman

0

Puede aplicar un CSS de reinicio para deshacerse de esos 'valores predeterminados'. Aquí hay un ejemplo de un css de restablecimiento http://meyerweb.com/eric/tools/css/reset/ . Simplemente aplique los estilos de reinicio ANTES de sus propios estilos.


0

Yo tuve el mismo problema. El desplazamiento apareció después de la actualización de UpdatePanel. La solución fue agregar una etiqueta vacía antes del UpdatePanel de esta manera:

<div></div>

...


1
UpdatePanel es una cosa de ASP.NET, ¿verdad? Porque esto no parece ser una cuestión de ASP.NET.
Joe Mabel

De hecho, si ve el fragmento de código en la pregunta, notará que es una pregunta ASP.NET.
mitkob

¡Ah! Lo siento, solo hojeé, no noté el asp: TextBox. FWIW, el problema no es un problema de ASP.NET . Cuando aparece este problema, normalmente lo que significa es que el desplazamiento en cuestión se debe a que algún otro elemento es más grande, y si da como resultado un diseño incorrecto, la clave normalmente es reducir el margen, el relleno o el borde de algún otro elemento dentro el mismo div padre.
Joe Mabel

0

Simplemente establezca el contorno en ninguno como este

[Identificador] {esquema: ninguno; }


0

En mi caso, el desplazamiento se agregó a un elemento personalizado con diseño de cuadrícula dentro de un li, mientras que ul era un flexbox vertical.

ingrese la descripción de la imagen aquí

La solución bastante simple fue establecer la definición de li como elemento de bloque con

li {
 display: block;
}

Y la compensación se fue

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.