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

веха · April 20, 2017

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

klierik · April 20, 2017

Проблема в Firefox

Igor Schnaider · April 20, 2017

В смысле не работает? Можно пример.

веха · April 20, 2017

On 4/20/2017 at 7:41 AM, klierik said:

Проблема в Firefox

Expand

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

klierik · April 20, 2017

On 4/20/2017 at 10:28 AM, веха said:

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

Expand

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

веха · April 20, 2017

On 4/20/2017 at 10:43 AM, klierik said:

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

Expand

Reveal hidden contents

<!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;
}

Edited April 20, 2017 by klierik

klierik · April 20, 2017

Выкладывай в песочницу https://jsfiddle.net

веха · April 20, 2017

On 4/20/2017 at 11:11 AM, klierik said:

Выкладывай в песочницу https://jsfiddle.net

Expand

https://jsfiddle.net/Nurpus/5pefhm78/

klierik · April 20, 2017

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

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

веха · April 20, 2017

On 4/20/2017 at 12:30 PM, klierik said:

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

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

Expand

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

klierik · April 20, 2017

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

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

веха · April 20, 2017

On 4/20/2017 at 1:33 PM, klierik said:

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

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

Expand

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

Igor Schnaider · April 21, 2017

https://drafts.csswg.org/css-flexbox-1/#item-margins

VeniVidiVici · April 21, 2017

вот тема

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

Sign In

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

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information