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

Question

Tengo un problema de posicionamiento con algunos elementos, al inspeccionarlo Herramientas para desarrolladores IE8 me muestra esto:

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

Aquí es la eso de 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

Answer 1

Esa compensación es básicamente la posición x, y que el navegador ha calculado para el elemento en función de su posición css atributo. Entonces, si coloca un <br> delante de él o cualquier otro elemento, cambiaría el desplazamiento. Por ejemplo, usted podría ponerlo a 0 por:

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

o

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

Por lo tanto, cualquiera que sea cuestión de posicionamiento que tiene, no es necesariamente un problema con offset, aunque siempre se puede arreglar por jugar con los atributos superior, izquierdo, derecho e inferior.

¿Su problema es la incompatibilidad del navegador?

Answer 2

Solución rápida:

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

esto debe equilibrar las compensaciones, pero tal vez debería echarle un vistazo a todo su diseño y ver cómo esa caja interactúa con otras cajas.

En cuanto a la terminología, left, right, y topbottom son CSS compensado propiedades. Se utilizan para posicionar elementos en una ubicación específica (cuando se usa con el posicionamiento absolute o fixed), o para moverlos en relación con su ubicación predeterminada (cuando se usa con el posicionamiento relative). Los márgenes, por otro lado, especifican espacios vacíos entre cajas y, a veces, colapsan, por lo que no se pueden usar de manera confiable como compensaciones.

Pero tenga en cuenta que en su caso offset no se puede calcular (únicamente) a partir de compensaciones de CSS.

Answer 3

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

Answer 4

Establecer las propiedades superiores e izquierdas 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 declaración <!DOCTYPE>, haciendo que se represente en el modo peculiar en IE8. En IE8 Developer Tools, asegúrese de que "Modo Quirks" no esté seleccionado en "Modo de documento". Si se selecciona, es posible que deba agregar la declaración <!DOCTYPE> apropiada.

Answer 5

Tuve el mismo problema. El desplazamiento apareció después de la actualización de UpdatePanel.La solución fue añadir una etiqueta vacía antes de que el UpdatePanel así:

<div></div> 

...

Answer 6

Para mí, fue vertical-align: baseline vs vertical-align: top que estaba causando la desplazamiento superior

Answer 7

Tuve el mismo problema en nuestro sitio web basado en .NET, ejecutando en DotNetNuke (DNN) y lo que me solucionó fue básicamente un simple reinicio 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 aparecer el extraño desplazamiento a veces, principalmente cuando hay algunos scripts incluidos.

Así que si usted está tratando de solucionar este problema en su sitio, intente introducir esto en su archivo CSS:

form { 
    margin: 0; 
} 

Answer 8

Sólo hay que establecer el contorno a ninguno como este

[Identificador] { esquema: ninguno; }

Answer 9

definen margen y el relleno para el elemento se enfrenta el problema:

#element_id {margin: 0; padding: 0} 

y ver si existe un problema. IE renderiza la página con más herencia no deseada. deberías evitar que lo haga.

Answer 10

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. Cambió a estándares de Internet Explorer 9 y todo encajó perfectamente en su lugar.

Answer 11

Esto parece extraño, pero puede intentar configurar vertical-align: top en el CSS para las entradas. Eso lo arregla en IE8, al menos.

Answer 12

elemento móvil superior: -12px o posicionar absolutamente no resuelve el problema, pero sólo enmascara que

que tenía el mismo problema - comprobar si tiene en un elemento de envoltura se mezcla: elementos flotantes con no flotante unos - mi elemento no flotante causó este extraño desplazamiento al flotante