Jump to content
  • 0

Firefox медиа запрос

WhatIsHTML

Asked by WhatIsHTML,

 Share

Question

WhatIsHTML Explorer

WhatIsHTML

Posted
Posted 
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Recipes</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <link href="css/style.css" rel="stylesheet"></head><body>  <div class="image"></div>  <div class="image"></div>  <div class="image"></div>  <div class="image"></div></body></html>
.image {	display: inline-block;	height: 100px;	width: 24%;	border: 1px solid black;}@media screen and (max-width: 640px){	.image {		width: 49%;	}}

https://yadi.sk/d/l4naCM-4q4suC- файлы

 

Простой пример. Блоки размещаются в одну линию, а при ширине экрана 640 и меньше их ширина становится 49%, т.е. в один ряд размещается два блока.

Проблема : в firefox (и только в нем) блоки принимают ширину 49% уже при экране 768px. Почему?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
WhatIsHTML Explorer

WhatIsHTML

Posted
  • Author
Posted

Там неудобно отслеживать размер видимой области. Но все же

https://jsfiddle.net/r5vs9dug/

 

Интересно то, что теперь пример работает нормально. Я же у себя на компе обнаружил проблему в том, что при связке директории "files" и файла "index.html" FF вел себя на ширине 768 так как должен был на ширине 640. Если переименовать один из файлов (либо директорию либо сам html-файл), то проблема исчезает. А почему так, я не знаю.

Вот такие чудеса

2016_03_11_10_13_41_Recipes_Mozilla_Fire

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Алеся
      Адаптивность колонок
      By Алеся
      Подскажите, пожалуйста, что можно прописать, чтобы при уменьшении разрешения экрана колонки справа смещались вниз? Весь код в песочнице https://jsfiddle.net/fzbkeLyt/
      Пробовала:     Но не сработало.
      @media (max-width: 1200px) {
        .container {
          max-width: 970px;
        }
      }
       
      @media (max-width: 992px) {
        .container {
          max-width: 750px;
        }
      }
       
      @media (max-width: 767px) {
        .container {
          max-width: none;
        }
      }
    • мурамаса
      Сьезжает верстка в firefox
      By мурамаса
      Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай.
      body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }  


    • celiFox
      Не работает скрипт в Firefox
      By celiFox
      Доброго времени суток,
      столкнулся с проблемой, скрипт не работает в Firefox но прекрасно работает в Chrome.
      Суть скрипта, каждые 10 секунд "переключать" рандомную фотку
      вот скрипт:
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>         <script> $(document).ready(function() { $('#slider4').children('div').each(function(n_div,div) { $(div).children('img').each(function(n_img,img) { if(n_img) $(img).css({'opacity':'0.0'}); else { $(div).attr({'value':(n_img+1)}); $(img).css({'opacity':'1.0'}); } }); }); window.setInterval(function() { $('#slider4').children('div').each(function(n,element) { var img = $(element).attr('value');; var rnd = Math.floor(Math.random()*(5-1+1))+1; if(img != rnd) { $(element).attr({'value':rnd}); $(element).children('#img' + (n + 1) + img).animate( {'opacity':'0.0'}); $(element).children('#img' + (n + 1) + rnd).animate( {'opacity':'1.0'}); } }); },10000); }); </script>  
      P.S Скрипт не мой, взял с этого форума, вырезал лишнее. Не кидайтесь сильно камнями) 
    • GorodSka3ka
      15" и 19" экраны не реагируют на @media правила css
      By GorodSka3ka
      В общем почти сделал я такой сайт на вордпресс на monstroid2, и когда принялся проверять с помощью инструмента Screenfly на сервисе quirktools.com вёрстку на всех экранах выяснилось, что 15" и 19" вообще не обращают внимание на установки. Использовал power builder в котором можно выставлять margin и bottom по 4 категориям, Desctop, laptop, tablet, phone. На два последних я вообще сделал отдельные упрощённые версии сайта. Десктоп показывается безукоризненно(широкие экраны), лаптоп(квадратные как у меня) тоже всё настроено как надо. Но вот 15 и 19 дюймов почему то игнорируют всё. Вставлял через siteOrigin Custom CSS свои @media правила, но опять же, на них реагирует всё кроме этих двух разрешений. Извиняюсь за то, что плохо объясняю. Но как могу, Я пока мало что понимаю в вёрстке) На снимке поехавший по одной оси текст. Не получается вернуть его в нужное положение на этих разрешениях.

    • мурамаса
      Отображение текста в браузерах
      By мурамаса
      Добрый день! Создал меню, текст в google chrome отображается не вылезая за границы, а в firefox как на картинке. В чем проблема и как это исправить?

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept