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

overflow hidden para que sirve

Question

Tengo un problema de posicionamiento con algunos elementos, al inspeccionarlo Herramientas de desarrollador IE8 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 de CSS. ¿Necesitamos un Offset además del margen?

Aquí está el código que está produciendo 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

Arreglo rapido:

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

esto debería equilibrar esas compensaciones, pero tal vez deberías echar un vistazo a todo tu diseño y ver cómo esa caja interactúa con otras cajas.

En cuanto a la terminología, left , right , top y bottom son propiedades de desplazamiento de CSS. Se utilizan para posicionar elementos en una ubicación específica (cuando se usa con posicionamiento absolute o fixed ) o para moverlos en relación con su ubicación predeterminada (cuando se usa con relative 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, esa compensación no se puede calcular (únicamente) a partir de compensaciones de CSS.

Answer 2

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. Por lo tanto, si coloca una <br> anterior o cualquier otro elemento, cambiaría la compensación. Por ejemplo, puede establecerlo en 0 de la siguiente manera:

#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 con el desplazamiento, aunque siempre puede solucionarlo jugando con los atributos superior, izquierdo, derecho e inferior.

¿Su problema es la incompatibilidad del navegador?

Answer 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 declaración <!DOCTYPE> , lo que hace 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, puede necesitar agregar la declaración <!DOCTYPE> apropiada.

Answer 4

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 5

Para mí, era vertical-alinear: línea de base vs vertical-alinear: superior que causaba el desplazamiento superior.

Answer 6

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

Answer 7

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 8

Simplemente establece el esquema para ninguno como este

[Identificador] {esquema: ninguno; }

Answer 9

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.

Por lo tanto, si intenta solucionar este problema en su sitio, intente ingresarlo en su archivo CSS:

form {
  margin: 0;
}

Answer 10

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 de UpdatePanel como esta:

<div></div>

...

Answer 11

define margen y relleno para el elemento que enfrenta el problema:

#element_id {margin: 0; padding: 0}  

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

Answer 12

superior del elemento móvil: -12px o posicionamiento absolutamente no resuelve el problema, solo lo enmascara

Tuve el mismo problema: compruebe si tiene en un elemento de envoltura mixto: elementos flotantes con elementos no flotantes: mi elemento no flotante causó este desplazamiento extraño al flotante.