• 0
веха

margin указанный в % не работает в firefox

Вопрос

здравствуйте! указываю DIVу (margin: 1.5% 0;) везде нормально работает, а вот в мозиле, не работает вообще, в чем может быть проблема?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

13 ответов на этот вопрос

  • 0
2 часа назад, klierik сказал:

Проблема в Firefox

есть какое-то решение?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
14 минуты назад, веха сказал:

есть какое-то решение?

та кто его знает... я проблемы не вижу, лишь описание. навыками телепатии не владею, потому и отвечаю в рамках той информации что ты предоставил.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
35 минут назад, klierik сказал:

та кто его знает... я проблемы не вижу, лишь описание. навыками телепатии не владею, потому и отвечаю в рамках той информации что ты предоставил.



Скрытый текст

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initiale-scale=1.0">
        <title>мой сайт</title>
        <link rel="stylesheet" href="reset.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
       
    </head>
    
    <body>
        <div id="wrapper">   
            
            <!-- шапка—————————————————————————-- -->  
            <header >
                <div>
                    <input type="button" value="войти" class="button" >
                </div>
            </header>
            <!-- ———меню————————————————————————- -->
            <nav>
                <ul>
                    <li ><a id="active" href="index.html">главная</a></li>
                    <li><a href="html/about_us.html">о сервисе</a></li>
                    <li><a href="html/history.html">история</a></li>
                    <li><a href="html/contacts.html">контакты</a></li>
                </ul>
            </nav>
            <!-- ——————контент———————————————————— -->
            <content>
                <div class="company">трям-трям</div>
                <a href="#">
                    <image src="image/nurpuslogo.png" class="img" alt="трям-трям"></image>
                </a>
                <div class="time">трям-трям</div>
            </content>   
            <!-- —————-подвал————————————————————-- -->
            <footer> ©</footer>
            
        </div>
    </body>      
    
</html>

css reset:

html, body, div, span, applet, object, iframe,input,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
 
/* HTML5 display-role reset for older browsers */
 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
 
body {
line-height: 1;
}
 
ol, ul {
list-style: none;
}
 
blockquote, q {
quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
 
table {
border-collapse: collapse;
border-spacing: 0;
}

style:

html,body{min-height: 100%; }
.company,.time{
    color: #ffffff;
    font-weight: bold;
    margin: 1.5% auto;
    text-shadow: 0 0 10px #000000;
}

nav ul li a{
    text-decoration: none;
    color: #ffffff;
}
/*——————-обертка——————*/
#wrapper{    
    display:-webkit-box;    
    display:-ms-flexbox;    
    display:flex;
    max-width: 1280px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 1.5%;
    background: -webkit-linear-gradient(black, white, black);
    background: linear-gradient(black, white, black);
    box-shadow: inset 0 0 200px 50px black;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    box-sizing: border-box;
}

/*——————-Шапка———————--*/
header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    border-bottom: 2px solid #ffffff;
}
.button{
    padding: 10px 10px;
    margin-bottom: -1px;
    border-radius: 100px 100px 0 100px;
    border: 2px solid #ffffff;
    background: rgba(0, 0, 0, 0);
    color: #ffffff;
    font-size: 1.2em;
    font-family:  Verdana, sans-serif;
}
.button:hover{
    color: #000000;
    background: #ffffff;
    cursor: pointer;
}
.button:active{
    background: rgba(0, 0, 0, 0);
    color: #ffffff;
    cursor: alias;
}
/*———————--меню————————*/

nav ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
nav ul li{
    font-size: 1.2em;
    margin-left: 2%;
}
#active{
    background: #ffffff;
    color: #000000;
}
nav ul li a:hover{
    background: #ffffff;
    color: #000000;
    cursor: pointer;
}
/*———--контент———————————*/
content{
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family:  Verdana, sans-serif;
/*    opacity: .1;*/
}
.company{
    font-size: 3em;
}

.img{
    width: 100%;
}

.time{
    font-size: 2em;
}
/*———————подвал———————--*/
footer{
    width: 100%;
    color: white;
    text-align: center;
    border-top: 2px solid #ffffff;
}

 

 

Изменено пользователем klierik

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
55 минут назад, klierik сказал:

Firefox vs Chrome: http://take.ms/HjuCR

Я не вижу разницы.

Когда висит картинка то между ней и трямами нет margin в landscape ориентации

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
4 часа назад, klierik сказал:

Вот landscape — http://take.ms/jkNWv

Но я все равно не понимаю о чём речь

https://jsfiddle.net/nzLmchyb/ - добавил картинку, если окно результата уменьшить чтоб появилась прокрутка то в мозиле видно как "трям" залазит на другие блоки

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

вот тема

И тут уже 2 варианта: либо использовать vh для вертикальных отступов, либо отказаться от флексов в данной ситуации.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас