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

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

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

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?

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

Intenta configurar vertical-align: top

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.

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 .

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.

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

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.

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

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;
}

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.

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>

...

Simplemente establezca el contorno en ninguno como este

[Identificador] {esquema: ninguno; }

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.

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