stil.display nu funcționează în Firefox, Opera, Safari - IE7 OK

Am un div absolut poziționat pe care vreau să îl afișez când utilizatorul dă clic pe un link. Codul onclick al legăturii apelează o funcție JS care afișează afișarea divului la bloc (încercat: "", inline , celulă de tabelă , inline-table , etc.). Acest lucru funcționează excelent în IE7, deloc în toate celelalte browsere pe care le-am încercat (FF2, FF3, Opera 9.5, Safari).

Am încercat adăugarea de alerte înainte și după apel și arată că afișarea sa schimbat de la none la block , dar div afişa.

Pot sa-l afis pe div pentru a fi afisat in FF3 daca schimba valoarea afisata folosind inspectorul HTML Firebug (dar nu prin rularea JavaScript prin intermediul consolei Firebug) - asa ca stiu ca nu se arata doar off-screen etc.

Am încercat tot ce mă pot gândi, inclusiv:

  • Folosind o doctype diferită (XHTML 1, HTML 4, etc)
  • Utilizarea vizibilității vizibile/ascunse în loc de blocul de afișare/none
  • Utilizarea JavaScript inline în loc de apel de funcție
  • Testarea de la diferite mașini

Orice idei despre ce ar putea cauza asta?

0
fr hi bn

8 răspunsuri

Încercați să setați înălțimea și lățimea divului și asigurați-vă că acesta este în partea superioară, stabilind indexul său z mai mare decât orice altceva. Dacă div poziția absolută este în interiorul unui element relativ poziționat, locația de sus și de stânga se bazează pe partea superioară și pe partea stângă a elementului relativ poziționat. Încercați să vă puneți divultura sub elementul corpului.

0
adăugat

Puteți oferi o marcare care reproduce eroarea? Situația dvs. trebuie să aibă legătură cu codul dvs., deoarece pot obține acest lucru pentru a lucra la IE, FF3 și Opera 9.5:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class = "snippet-code"> funcția arată() {   var d = document.getElementById ('testdiv');   d.style.display = 'bloc'; }

  #testdiv {
  poziția: absolută;
  înălțime: 20px;
  lățime: 20px;
  afișare: niciunul;
  fundal-culoare: roșu;
}  

<div class = "snippet-code-html lang-html prettyprint-override"> <div> Dă clic pe mine </div></div>

0
adăugat
Am avut această problemă, dar am folosit trucul IE de a apela elementul prin id-ul lui fără să îl caute mai întâi: testDiv.style.display = 'block';
adăugat autor chama, sursa

Deoarece setarea proprietăților cu JavaScript nu părea să funcționeze, dar setarea utilizând inspectarea Firebug a făcut-o, am început să bănuiesc că selectorul de JavaScript ID a fost spart - poate că au existat mai multe elemente în DOM cu același ID? Sursa nu a arătat că au existat, dar prin looping prin toate divs folosind JavaScript am constatat că acesta este cazul. Iată funcția pe care am terminat-o pentru a afișa pop-ul:

function openPopup(popupID)
{
  var divs = getObjectsByTagAndClass('div','popupDiv');
  if (divs != undefined && divs != null)
  {
    for (var i = 0; i < divs.length; i++)
    {
      if (divs[i].id == popupID)
        divs[i].style.display = 'block';        
    }
  }
}

(funcția utilitate getObjectsByTagAndClass nu este listată)

În mod ideal, voi afla de ce același element este inserat de mai multe ori, dar nu am control asupra platformei de redare, ci doar intrările sale.

Deci, atunci când depanem astfel de probleme, nu uitați să verificați ID-urile duplicate din DOM, care pot rupe getElementById .

Pentru toți cei care au răspuns, mulțumesc pentru ajutor!

0
adăugat
Prin aceasta, dacă vrei să spui că ai mai multe nume de id pe aceeași pagină, este nevalid, deoarece numele de id pot apărea doar o singură dată pe o pagină și trebuie să fie unic pentru un element.
adăugat autor Rob, sursa

Check the error console (Tools Menu > Error Console in Firefox 3) to make sure that there isn't another error happening that you're not seeing, which is stopping your script from working.

0
adăugat

Există o eroare de afișare enervantă pe Firefox 3.5, dar nu pe IE7 sau Firefox 2.0.9

Am poziția absolută a lui DIV - prima cu text simplu; al doilea cu un meniu CSS (tip sucklefish cu UL și LI) și al treilea ditto. Al treilea nu va afișa deloc, chiar dacă codificarea a fost verificată și sa dovedit a fi perfectă cu validatorul HTML al W3C.

Ca măsură temporară, am combinat conținutul celui de-al doilea și celui de-al treilea DIV.

Lucrurile trebuie să fie rău la Mozilla atunci când IE7 și FF2 afișează OK dar nu FF 3.5

0
adăugat
Apoi, marcajul dvs. trebuie să fie mai rău pentru că dacă marcajul dvs. funcționează în IE, dar nu FF, atunci marcajul este problema. Dar începeți propriul dvs. fir și arătați-ne ce aveți, pentru a vă putea rezolva problema.
adăugat autor Rob, sursa

De fapt, am fost confruntat cu aceeași problemă pe care o descrieți aici. Ceea ce a rezolvat problema mea a fost schimbarea proprietăților documentului.

vechi DOCTYPE/html spec



Înlocuit cu

<html>
0
adăugat

Trebuie să scrieți o metodă window.onload :

window.onload = document.getElementById('testdiv').style.display='inline';

Sau puteți face și o variabilă:

var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
0
adăugat

Vă dau un indiciu BIG:

<div style="..." class="..."> ... </div>

Dacă aveți ceva în stil, atunci document.style va funcționa! Dacă ai ceva în clasă, nu se va afișa în document.style și clasa = "..." o va suprascrie!

Gândiți-vă la acest lucru și acest lucru va clarifica atât de multe aspecte. Doar această înțelegere ușoară vă va rida de acest VIRUS MIND. Să aveţi o zi bună. Noroc, Ron Lentjes, LC CLS.

0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com