IE 11ではドロップダウンが左に移動しましたが、ChromeやFFでは移動できません。

私はChromeとFirefoxでうまく動作するドロップダウンメニューを作成しましたが、IE 11で試してみるとドロップダウンの内容が横になります。IE 11ではドロップダウンが左に移動しましたが、ChromeやFFでは移動できません。

私はグーグルで検索しましたが、解決策を見つけることができません。

Django管理ページのヘッダーに移動する必要があることに注意してください。そのため、いくつかの重要な点があります。また、ドロップダウンはページ上の他のすべての要素の上になければなりません。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<h1 style="text-align:left;float:left;"><a href="kalle.html">Test</a></h1> 
<style type="text/css"> 
    .dropbtn { 
    background-color: #417690; 
    color: #f5dd5d !important; 
    padding: 6px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 

} 

    .droplink { 
    background-color: #417690; 
    color: #f5dd5d !important; 
    padding: 4px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 

} 

/* The container <div> - needed to position the dropdown content */ 
.dropdowncontainer { 
    display: inline-block; 
    padding-top: 10px; 
} 


.dropdown { 
    float: left; 
    display: inline-block; 
} 


/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1000; 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    color: black !important; 
    padding: 6px 16px; 
    text-decoration: none; 
    display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover { 
    background-color: #f1f1f1; 
    color: black; 
} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

/* Change the background color of the dropdown button when the dropdown content is shown */ 
.dropdown:hover .dropbtn { 
    background-color: #376880; 
} 
.droplink:hover { 
    background-color: #376880; 
} 
</style> 

<div class="dropdowncontainer"> 
    <div class="dropdown"> 
     <a class="dropbtn" href="">XXX</a> 
     <div class="dropdown-content"> 
      <a href="installations.html">Installations</a> 
      <a href="files.html">Files</a> 
      <a href="task.html">Tasks</a> 
      <a href="release.html">Releases</a> 
      <a href="copy.html">Copy</a> 
     </div> 
    </div> 
     <a class="droplink" href="node.html">Nodes</a> 
</div> 
</body> 
</html>

コードでJSFiddleを作成しました。どんな助けでも大歓迎です。

JSfiddle

出典

2017-01-03 schizo

.dropdown-contentに追加しますか？ –

はEdgeとInternet Explorerの両方でうまく見えます： -/ –

.dropdown-contentの左上のプロパティを変更することで、ドロップダウンメニューの位置を移動することができました。どうすれば下の左の値を自動的に取得できますか.dropbtnの？ @Caelan。 – schizo

position: relativeを.dropdownクラスにしてください。

明示的なposition: relative要素が指定されていない場合の、position: absolute要素の動作は、ブラウザによって異なります。したがって、異常です。

また、私は `left`、` top`プロパティが設定されていないためであると信じて、それは（IE）ランダムまたはブラウザ与えられたもののいずれかを取ってtop: 0 & left: 0

.dropdown-content { 
    top: 0; 
    left: 0; 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1000; 
}

出典

2017-01-03 11:16:48 nashcheez

位置を設定しようとしました：.dropdownクラスに関連しています。これにより、ドロップダウンボックスがページ上の他の要素の背後にレンダリングされます。私はこれを修正しようとするよりも、ドロップダウンメニューを再設計する必要があると考え始めています。 – schizo

'top：0'と' left：0'の値も指定する必要があります。構造はうまくいくようです。 – nashcheez

.dropdown-contentにtop、leftを追加し、.dropdowncontainerの位置を設定しました：aboslute;私は手動で働くトップの値を指定する必要がありますが、私は自動的にトップ値を取得することができれば希望しながら、その方法は、それは左に正しく配置します。これまでのところ助けてくれてありがとう。 .dropdowncontainerをposition：absoluteに設定すると、特定のページの他の要素の後ろに隠されることに気付きました。私は 'top'が異なるブラウザ間で異なるため、デフォルトの動作を言ったように.dropdown-コンテンツ – schizo

は.dropdown-コンテンツの左と上の値に設定してください。

出典

2017-01-03 11:00:28 grinmax

私はそれを試して、それが動作します。しかし、どのようにしたら、.dropbtnの左下の値を自動的に取得し、正しく整列させることができますか？ – schizo

プロパティ：position：relativeを持つ親コンテナを作成する必要があります。ドロップダウンでpositionを設定する必要があります。 – grinmax

親divをposition：relativeで追加した場合、ドロップダウンは他のオブジェクトの背後でレンダリングされますが、上と左に対して正しく表示されます。非常にイライラする。 – schizo

IE 11ではドロップダウンが左に移動しましたが、ChromeやFFでは移動できません。

答えて

関連する問題