2016-06-12 8 views
0

私は...クローム/サファリでFirefox/IEのcss "right"プロパティが異なっていますか?

<div style="position:fixed; top: 60px; right: -51px;"> 
     <form> 
     .... 
     </form> 
    </div> 

をこのようなdiv要素を持っている、それは完全に、画面の右上に小さな検索ボックスを配置します。 Firefoxの/ IEで

、トップは正しいのですが、右の位置は(周り100pxにのように見える)のエッジに十分タイトではありません。

ここでは例です:http://codepen.io/d3wannabe/pen/LZNVqe

は絶大これが起こっかもしれない理由を知っている誰から任意の考えに感謝!

+0

Chrome、Edge、Firefox、IE11でコードパッドを見ただけで、検索ボックスがすべて同じ場所に配置されています。ちょうどもう一度見えて、おそらくそれはいくつかのpxielです – HenryM

+0

Hey HenryM - 私はちょうど正しい位置を-70pxに変更しました。私にとっては、クロムにはかなりタイトで、そしてファイアフォックスではかなりの違いがあります。あなたがまだ目立った違いが見えない場合は私に教えてください。私はスクリーンショットをアップロードします(いずれにしても差異の原因に関するアイデアはありますか?) – d3wannabe

答えて

1

これはrightに関するものではありませんが、.search-containerの幅について - それは.search-boxは、ブラウザ(Firefoxの:http://i.imgur.com/OIh07eG.png)間で異なる右のギャップを持っているようので、それが表示され、ChromeとFirefoxで異なっています。デベロッパーツールを使用して、さまざまなブラウザーでそれを調べることができます。等しい右のギャップを持つ場合は、position: fixed div内のコンテンツの幅を正規化する必要があります。

+0

Andrey - ありがとうございます。たとえば、検索コンテナにwidth:100pxを指定すると、画像が固定されます。私が今調べる必要がある唯一の問題は、フォームを壊さずに(つまり、検索コンテナの幅が100pxのときにクリックする)、それをどうやって行うのかです。それ以上の考え?もしそうでなければ、私はこれを質問への答えとして受け入れるつもりだと思う – d3wannabe

1

width:0px;を追加し、right:0pxへの変更は動作するようですか?

+0

私にはフォームを壊すだけです検索アイコン自体は少なくとも右に固定されているが、残りの部分は完全にページ外にある) – d3wannabe

+0

私のために働いた!ありがとう。 – xyres

関連する問題