Work .outerWidth(true) in Chrome



  • Incorrect work. .outerWidth(true) and other functions of obtaining the width of the facility in Chrome. The same block in Firefox shows 370px and Chrome 388px. I'm making the width. alert()♪ But the actual width of the block if the picsel line is measured is the same in both browsers. The essence of the violin is to receive the width of the block and to apply the same width select♪ What's the catch?

    $(document).ready(function(){
            var select_body_item_value = $('#select_body_item option:selected').text(); //получаем содержимое выбранного элемента селекта
    
        $('#select_placeholder_item').text(select_body_item_value); //записываем содержимое выбранного пункта селекта в плейсхолдер
    
        var select_wrap_item_width = $('#select_wrap_item').outerWidth(true); //получаем ширину обёртки селекта
    
        $('#select_body_item').width(select_wrap_item_width); //устанавливаем ширину селекта равной ширине обёртки селекта
    
        $('#select_body_item').change(function(){
            var select_body_item_value = $('#select_body_item option:selected').text(); //получаем содержимое выбранного элемента селекта
    
            $('#select_placeholder_item').text(select_body_item_value); //записываем содержимое выбранного пункта селекта в плейсхолдер
    
            var select_wrap_item_width = $('#select_wrap_item').width(); //получаем ширину обёртки селекта
    
            $('#select_body_item').width(select_wrap_item_width); //устанавливаем ширину селекта равной ширине обёртки селекта
        });
        alert(select_wrap_item_width);
    });
    



  • Try forcing Cs box-sizing: border-box and -moz-box-sizing: border-box; / For Firefox */. Then you'll have the same algorithm to calculate the width and height of the element in all the browsers.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2