Como faço para me livrar do deslocamento de um elemento usando CSS?

Eu tenho um problema de posicionamento com alguns elementos, ao inspecionar as ferramentas do desenvolvedor do IE8 ele me mostra o seguinte:

Agora tenho quase certeza de que meu problema é esse deslocamento de 12, mas como faço para removê-lo ? Não consigo encontrar qualquer menção de uma propriedade de deslocamento CSS. Precisamos de um Offset além da margem?

Aqui está o código que está produzindo isso:

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

O elemento com o deslocamento é inputBox

Esse deslocamento é basicamente a posição x, y que o navegador calculou para o elemento com base em seu atributo css de posição. Portanto, se você colocar um <br>antes dele ou de qualquer outro elemento, o deslocamento será alterado. Por exemplo, você pode defini-lo como 0 por:

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

ou

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

Portanto, qualquer problema de posicionamento que você tenha, não é necessariamente um problema de deslocamento, embora você sempre possa corrigi-lo brincando com os atributos superior, esquerdo, direito e inferior.

O seu problema com o navegador é incompatível?

Para mim, era o vertical-align: baselinevs vertical-align: topque estava causando o deslocamento superior.

Tente definir vertical-align: top

Conserto rápido:

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

isso deve equilibrar esses offsets, mas talvez você deva dar uma olhada em todo o layout e ver como essa caixa interage com outras caixas.

Quanto à terminologia, left, right, tope bottomsão CSS compensar propriedades. Eles são usados ​​para posicionar elementos em um local específico (quando usados ​​com absoluteou fixedposicionamento), ou para movê-los em relação ao seu local padrão (quando usados ​​com relativeposicionamento). As margens, por outro lado, especificam lacunas entre as caixas e às vezes se fecham, portanto, não podem ser usadas de maneira confiável como compensações.

Mas observe que, no seu caso, esse deslocamento não pode ser calculado (somente) a partir dos deslocamentos CSS.

Definir as propriedades superior e esquerda com valores negativos pode não ser uma boa solução alternativa se o seu problema for simplesmente que você está no modo peculiares. Isso pode acontecer se a página não tiver uma <!DOCTYPE>declaração, fazendo com que ela seja renderizada no modo quirks no IE8. Nas Ferramentas de desenvolvedor do IE8, certifique-se de que "Modo peculiares" não esteja selecionado em "Modo documento". Se estiver selecionado, pode ser necessário adicionar a <!DOCTYPE>declaração apropriada .

Se você estiver usando as ferramentas de desenvolvedor do IE, certifique-se de não as ter deixado acidentalmente em uma configuração mais antiga. Eu estava ficando louco com esse mesmo problema até que vi que ele estava configurado para os padrões do Internet Explorer 7. Mudou para os padrões do Internet Explorer 9 e tudo se encaixou perfeitamente.

mover o elemento superior: -12px ou posicioná-lo absolutamente não resolve o problema, apenas o mascara

Eu tive o mesmo problema - verifique se você tem um elemento de envolvimento misturado: elementos flutuantes com não flutuantes - meu elemento não flutuante causou este estranho deslocamento para o flutuante

definir margem e preenchimento para o elemento está enfrentando o problema:

#element_id {margin: 0; padding: 0}  

e veja se existe problema. O IE renderiza a página com mais herança indesejada. você deve impedir que isso aconteça.

Isso parece estranho, mas você pode tentar configuração vertical-align: topno CSSpara as entradas. Isso corrige no IE8, pelo menos.

Tive o mesmo problema em nosso site baseado em .NET, rodando em DotNetNuke (DNN) e o que resolveu para mim foi basicamente uma redefinição de margem simples da tag do formulário. Os sites baseados em .NET geralmente são agrupados em um formulário e, sem redefinir a margem, você pode ver o estranho deslocamento aparecendo às vezes, principalmente quando há alguns scripts incluídos.

Portanto, se você está tentando corrigir esse problema em seu site, tente inserir isso em seu arquivo CSS:

form {
  margin: 0;
}

Você pode aplicar um CSS de redefinição para se livrar desses 'padrões'. Aqui está um exemplo de um css de redefinição http://meyerweb.com/eric/tools/css/reset/ . Basta aplicar os estilos de redefinição ANTES de seus próprios estilos.

Eu tive o mesmo problema. O deslocamento apareceu após a atualização do UpdatePanel. A solução foi adicionar uma tag vazia antes do UpdatePanel assim:

<div></div>

...

Basta definir o contorno para nenhum como este

[Identificador] {esboço: nenhum; }

No meu caso, o deslocamento foi adicionado a um elemento personalizado com layout de grade dentro de um li enquanto o ul era um flexbox vertical.

A solução bastante simples foi definir o definir o li como elemento de bloco com

li {
 display: block;
}

E o deslocamento foi embora