Маржа не действует должным образом в Firefox -- html поле с участием css поле с участием firefox поле с участием firebug поле с участием margin пол Связанный проблема

Margin not acting properly in Firefox


0
vote

проблема

русский

У меня очень странная проблема, что за жизнь меня я могу решить. По сути, в Safari My Top Navigation не имеет верхнего поля и является промывкам с самой верхней частью страницы. В Firefox он также применяет нижнюю часть на вершину, по какой-то причине я не могу выяснить. Когда я удаляю маржу в Firebug, фальшивая верхняя маржа также удаляется.

Пожалуйста, просто перейдите на страницу в Firefox, чтобы увидеть, что я имею в виду. Если у вас есть Firebug, отключите свойство Margin на основной навигации #, и вы увидите, что происходит.

Редактировать: Забыли включить ссылку на сайт: Ссылка

Вот код:

 <код> <body>   <div id="page-wrap">     <ul id="main-navigation">      <li><a href="/" id="home-link<?php if (is_home()) { echo '-active'; } ?>" class="main-nav-link">Home</a></li>      <li><a href="/is" id="about-link<?php if (is_page("About")) { echo '-active'; }  ?>" class="main-nav-link">About</a></li>      <li><a href="/discusses" id="articles-link<?php if (is_page("Articles")) { echo '-active'; } if (is_single()) { if (in_category( 3, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Articles</a></li>      <li><a href="/does" id="portfolio-link<?php if (is_page("Portfolio")) { echo '-active'; } if (is_single()) { if (in_category( 4, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Portfolio</a></li>      <li><a href="/listens" id="contact-link<?php if (is_page("Contact")) { echo '-active'; } ?>" class="main-nav-link">Contact</a></li>      <li><a href="/rss" id="feeds-link" class="main-nav-link">Feeds</a></li>      <div class="clear"></div>     </ul>    

и CSS:

 <код> body {  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Trebuchet, sans-serif; font-size: 13px; color: #2a2a2a;  border-top: 4px solid #f2f2f2;  }  #page-wrap { width: 600px; margin: 0 auto; }  #main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 48px -10px; }  #main-navigation li { float: left; height: 30px; }   #main-navigation li a { display: block; cursor: pointer; margin-right: 28px; height: 30px; text-indent: -9999px; background: url(/images/storminkSprite.png) no-repeat; background-color: transparent; }   

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

Английский оригинал

I'm having a very weird problem that for the life of me I can solve. Basically, in Safari my top navigation has no top margin and is flush with the very top of the page. In firefox, it is applying the bottom margin to the top as well, for a reason I cannot figure out. When I remove margin in firebug, the fake top margin is also removed.

Please, just goto the page in firefox to see what I mean. If you have firebug, disable the margin property on the #main-navigation and you'll see what is happening.

EDIT: Forgot to include link to site: Link

Here's the code:

<body>   <div id="page-wrap">     <ul id="main-navigation">      <li><a href="/" id="home-link<?php if (is_home()) { echo '-active'; } ?>" class="main-nav-link">Home</a></li>      <li><a href="/is" id="about-link<?php if (is_page("About")) { echo '-active'; }  ?>" class="main-nav-link">About</a></li>      <li><a href="/discusses" id="articles-link<?php if (is_page("Articles")) { echo '-active'; } if (is_single()) { if (in_category( 3, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Articles</a></li>      <li><a href="/does" id="portfolio-link<?php if (is_page("Portfolio")) { echo '-active'; } if (is_single()) { if (in_category( 4, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Portfolio</a></li>      <li><a href="/listens" id="contact-link<?php if (is_page("Contact")) { echo '-active'; } ?>" class="main-nav-link">Contact</a></li>      <li><a href="/rss" id="feeds-link" class="main-nav-link">Feeds</a></li>      <div class="clear"></div>     </ul>  

And the CSS:

body {  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Trebuchet, sans-serif; font-size: 13px; color: #2a2a2a;  border-top: 4px solid #f2f2f2;  }  #page-wrap { width: 600px; margin: 0 auto; }  #main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 48px -10px; }  #main-navigation li { float: left; height: 30px; }   #main-navigation li a { display: block; cursor: pointer; margin-right: 28px; height: 30px; text-indent: -9999px; background: url(/images/storminkSprite.png) no-repeat; background-color: transparent; } 

I really have no idea what to do anymore, I've been trying to fix this one problem all day and I'm completely out of ideas, so I really hope someone can help.

</div
              
 
 

Список ответов

0
 
vote
vote
Лучший ответ
 

Кажется, что примерная пример действует странно .. Это должно быть что-то в коде, хотя. Быстрое исправление было бы, чтобы добавить примерную подкладку

 <код> #main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 0 -10px; padding-bottom:48px; }   

Это отлично работает для меня

 

it seems that the margin propriety is acting wierd..it must be something in the code though.. the quick fix would be to add the padding propriety

#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 0 -10px; padding-bottom:48px; } 

this works fine to me

</div
 
 
0
 
vote
 <код> #main-navigation {margin-bottom:0px!important;}   
 
#main-navigation {margin-bottom:0px!important;} 
</div
 
 
0
 
vote

Вы можете попробовать использовать

 <код> padding-bottom: 45px and margin-left: -10px   

У меня нет никакой подсказки, потому что маржа делает это, но этот быстрый обходной путь должен быть в порядке.

 

you could try using

padding-bottom: 45px and margin-left: -10px 

I have no clue as to why margin is doing that but this quick workaround should be fine.

</div
 
 

Связанный проблема

6  Предотвращение подачи двойной формы [дубликат]  ( Preventing double form submissions ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

1  Как нажать на изображение, чтобы показать изображения с функцией  ( How to click on an image to show images with a function ) 
Попытка нажать на Magic8, но счастливые, грустные и удивленные картинки не будут отображаться ниже линии. Что я сделал не так? Я сохранил изображения в Random...

1  Удалить таблицу TR при сохранении AddClass  ( Remove table tr while maintaining addclass ) 
Хорошо, у меня есть таблица TR, которая удаляется, когда вы нажимаете кнопку. Я использую Animate.css и хотел бы добавить класс после того, как мой запрос AJA...

0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT  ( Convert gnome help yelp xml to static html with xslt ) 
Некоторые из приложений GNOME на Linux используют браузер справки под названием <код> yelp . Например, Gnome-Calculator, <Код> gcalctool , имеет свои файлы сп...

31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {}  ( Detecting first and last item inside a groovy each closure ) 
Я использую Groovy's Handy Markupbuilder для создания HTML-страницы из различных исходных данных. Одна вещь, которую я изо всех сил пытаюсь сделать красиво,...

13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli)  ( Send html form data to sql database via php using mysqli ) 
Я хочу отправить данные, введенные в HTML-форму в мою базу данных SQL, то есть создайте новую строку, приписываю определенные значения в определенные столбцы....

1  Добавление события onload для GridView  ( Adding an onload event for a gridview ) 
У меня есть одна сетка, вот HTML-код: <код> <table cellspacing="0" border="1" style="border-collapse:collapse;" id="grid1" rules="all"> <tbody><t...

0  Группировка элементов Markdown в элементе div или пользовательской теги HTML  ( Grouping markdown elements in to div element or custom html tag ) 
Я использовал Jeykll Tool для генерации контента отметки вниз в HTML. Я хочу группировать ниже элементы отметки вниз в элемента Div или любой другой пользов...

0  Как сделать раскрывающееся меню горизонтальное  ( How to make a drop down menu horizontal ) 
Я не уверен, что это возможно, но у меня есть кнопка, называемая фруктами. Когда я нажимаю на него, 4 фруктовые кнопки появляются вертикально вниз, но я хочу,...

-1  Перемещение и переименование загруженного файла  ( Moving and renaming an uploaded file ) 
Извините, если это легко, но я немного нового для программирования, поэтому у меня проблемы с переименованием временного загруженного файла. Вот мой код: ht...

6  Нет прокрутки после закрытия лайтбокса (Blueimp)  ( No scrolling after closing lightbox blueimp ) 
Я построил свой собственный сайт и хотел добавить разные галереи, поэтому я попробовал Blueimp. Он отлично работает, но когда я закрываю лайтбокс, я больше не...

0  У меня проблема с переполнением моей контактной формы при отображении на мобильном  ( Im having an issue with my contact form overflowing when displayed on a mobile ) 
Выпуск в основном, когда у меня есть эта форма, отображаемая на мобильном телефоне, когда я перехожу на ввод текста в форму, Textarea слишком много расширяетс...

3  Как поставить DIV в центре другого дивы?  ( How to put a div at center of another div ) 
Я хотел бы иметь один div в центре другого div горизонтально. <код> <div id="container"> <div id="centered"> hello world; </...

0  Скрывая неупорядоченный список, когда у него нет элементов  ( Hiding an unordered list when it has no elements ) 
У меня есть проблема, которая кажется сначала, как общий язык No-Brainer и легкая задача. У меня есть плагин JavaScript на моей странице, который генерирует...

0  Динамический расчет расстояния для маршрута  ( Dynamic distance calculation for route ) 
Я хочу реализовать форму, где вы вводите отправку и пункт назначения, а затем, используя API Google Maps JavaScript, он будет отображать расстояние в виде зна...

Связанный проблема

6  Предотвращение подачи двойной формы [дубликат] 
1  Как нажать на изображение, чтобы показать изображения с функцией 
1  Удалить таблицу TR при сохранении AddClass 
0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT 
31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {} 
13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli) 
1  Добавление события onload для GridView 
0  Группировка элементов Markdown в элементе div или пользовательской теги HTML 
0  Как сделать раскрывающееся меню горизонтальное 
-1  Перемещение и переименование загруженного файла 
6  Нет прокрутки после закрытия лайтбокса (Blueimp) 
0  У меня проблема с переполнением моей контактной формы при отображении на мобильном 
3  Как поставить DIV в центре другого дивы? 
0  Скрывая неупорядоченный список, когда у него нет элементов 
0  Динамический расчет расстояния для маршрута