2013-08-26 2 views
0

Когда я встраиваю элемент управления WebBrowser в окно с помощью элемента управления Active-X или .NET WebBrowser (тонкая оболочка вокруг Active-X), он не выглядит для оценки @media css-атрибуты, такие как max-width. Учитывая {fiddle}:Встраиваемый элемент управления WebBrowser, не учитывающий атрибут max-width @media

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- necessary for tablets --> 
    <style> 
    #redBox { 
     background-color: red; 
    } 

    #blueBox { 
     background-color: blue; 
    } 

    @media (max-width: 1000px) { 
     #redBox { 
      display: none; 
      height: 0px; 
     } 
    } 
    </style> 
</head> 
<body> 
    <div id="redBox"> Red Box </div> 
    <div id="blueBox"> Blue Box </div> 
</body> 
</html> 

Красная коробка должна исчезнуть, когда вы сделать окно меньше 1000px.

Это работает в Chrome, Firefox и IE. Однако при загрузке страницы в элементе управления WebBrowser с помощью элемента управления NET WebBrowser или неуправляемого приложения с помощью элемента управления ActiveX X изменение не работает. Неважно, загружаю ли я его с помощью атрибута file:/// или с помощью http.

Любая идея, как заставить ее работать?

ответ

0

У меня аналогичная проблема ...

Единственное решение, которое я могу думать в JavaScript-обходной путь, установка желаемых CSS-атрибуты через JS в зависимости от экрана ширины, например screen.availWidth или такие ,

1

Попробуйте добавить: <meta http-equiv="X-UA-Compatible" content="IE=9"> в html.

Убедитесь, что у вас версия IE9 или более поздняя. Управление WebBrowser имеет все функции Ie, которые настроены на локальном ПК.

Смежные вопросы