Dynamiczna szerokość elementu i precyzja subpiksela IE9

Mam 3 elementy div, #left, #center i #right, które chcę ustawić na tej samej linii, która ma określoną szerokość, powiedzmy 300px.Dynamiczna szerokość elementu i precyzja subpiksela IE9

#left i #right mają małą zawartość, powiedzmy 50px każda, i wyświetlam je w całości.

#center ma dużo treści, powiedzmy 400px, i chcę wyświetlić jak najwięcej w pozostałym miejscu na linii. W tym celu zawarłem treść #center w #inner.

Przepłynąłem #left i #center na lewo i # prawo na prawo.

<div id="left"> 
    LEFT 
</div> 
<div id="center"> 
    <div id="inner"> 
     LONG CONTENT ... 
    </div> 
</div> 
<div id="right"> 
    RIGHT 
</div>

Example fiddle

Pytanie 1: Czy istnieje sposób dokonywania #center div podjęcia wszelkich dostępnych pozostałej przestrzeni na linii poprzez CSS (w naszym przykładzie #center musi być 200px szerokości - szerokość linii, 300px, minus szerokość #left i #right, każde 50px)?

Pytanie 2: Nie znalazłem rozwiązania za pomocą CSS i użyłem jQuery do dynamicznego obliczenia pozostałej dostępnej przestrzeni. Działa to dobrze we wszystkich przeglądarkach oprócz IE9.

Problem z IE9 polega na tym, że ma precyzję subpiksela, a jQuery zwraca tylko wartości całkowite dla wymiarów elementów.

Oto przykład: IE9 widzi, że #left ma szerokość 50,5px, podczas gdy jQuery widzi to jako 50px. Ta różnica powoduje podział układu w IE9.

Jeśli muszę obliczyć dostępne miejsce za pomocą JavaScript, co mogę zrobić, aby rozwiązać ten problem z IE9?

Źródło

2012-05-06 jsgroove

Nie jestem pewien, czy to będzie działać, ale może po prostu podłoga wartość zwracana i uczynić 50,5 iść do 50? Jeśli wartości są zawsze większe, to zadziała. Jeśli było to 49,5, to będzie krótki piksel, ale to przynajmniej nie sprawi, że twoje treści nie będą pasować. –

Nie ma sposobu, aby zmienić wartość pływającą używaną w IE9 w jej układzie. Kiedy wywołuję szerokość elementu za pomocą jQuery w IE9, zawsze zwraca on liczbę całkowitą 50px. Ale na wewnętrznym wyświetlaczu IE9 używa pływaków, 50.5px. Wiem o tym, ponieważ zajrzałem do narzędzi programistycznych IE9, a dla wymiarów elementów wyświetlają wartości zmiennoprzecinkowe. – jsgroove

Więc kiedy ustawisz szerokość na 50px, ie9 ustawia ją na 50.5px? To dziwne ... Postarałem się tak przedtem na poziomie piksela i nigdy nie miałem problemów. Wydaje się dziwne. Powodzenia, przepraszam, nie mogłem pomóc! –

Na przyszłość, co zrobiłem, było zmuszenie szerokość że IE9 widzi jako pływaka do wartości, które jQuery widzi jako liczba całkowita :

var elem = $("#element"); 
elem.css("width", elem.width());

Jeśli #element miał wartość postrzegane przez IE9 jak 50.5px, jQuery wymusza wartość momencie to, że jQuery widzi 50px.

Źródło

2012-05-07 06:36:14 jsgroove

spróbuj tego:

main = $("#main").width(); 
centerWidth = main - ($("#left").width() + $("#right").width()); 
$("#center").width(centerWidth);

czyli

main = parseFloat(document.getElementById("main").style.width) 
centerWidth = main - (parseFloat(document.getElementById("left").style.width) + parseFloat(document.getElementById("right").style.width)); 
document.getElementById("center").style.width = centerWidth + "px"

Źródło

2012-05-06 15:59:52 undefined

Podałem, że to zrobiłem i to nie działa w IE9, ponieważ IE9 ma wartości float dla width, a jquery zwraca tylko wartości całkowite. Przykład: IE9 widzi #left jako 50.5px, jquery widzi #left jako 50px. Ta wartość zmiennoprzecinkowa spowoduje złamanie układu, ponieważ nie mieści się w obliczonej wartości ze względu na 0.5px więcej niż widzi IE9. – jsgroove

@jsgroove wypróbowałeś metodę 'Math.ceil()'? – undefined

Nie ma nic do użycia Math.ceil(), ponieważ jquery zawsze zwraca szerokość elementu jako liczbę całkowitą. Tylko IE9 wewnętrznie widzi to jako zmienną. – jsgroove

Moje rozwiązanie:

el = $('#myelement'); 

//Hello IE9-10 and float "width", e.g. 83.41px; 
try { 
    var elWidth = Math.ceil(parseFloat(getComputedStyle(el[0]).width)); 
} 
//But old browser doesn't know "getComputedStyle()" e.g. IE 8 and oldest; 
catch (e) { 
    var elWidth = el.width(); 
} 

elWidth; //IE 9-10 return 84px, other browsers 83px;

Źródło

2013-08-08 11:15:06 NeoXaker

Dynamiczna szerokość elementu i precyzja subpiksela IE9

Odpowiedz

Powiązane problemy