html bootstrap - Twitter와 IE8 문제 부트 스트랩 3




version cdn (19)

설명에서 그것은 IE8이 당신을위한 표준 버전이고 content="IE=edge" 를 만드는 것은 페이지를 최상위 모드로 렌더링 할 것이라고 말합니다. 호환되도록하려면 content="IE=8" 변경하십시오.

IE8 모드는 W3C Cascading Style Sheets 레벨 2.1 사양 및 W3C 선택기 API를 비롯하여 많은 기존 표준을 지원합니다. 또한 W3C Cascading Style Sheets 레벨 3 사양 (작업 초안) 및 기타 새로운 표준을 제한적으로 지원합니다.

가장자리 모드는 Internet Explorer가 사용 가능한 가장 높은 모드로 콘텐츠를 표시하도록 지시합니다. Internet Explorer 9에서는 IE9 모드와 동일합니다. Internet Explorer의 이후 릴리스에서 상위 호환성 모드가 지원되면 가장자리 모드로 설정된 페이지가 해당 버전에서 지원되는 최상위 모드로 나타납니다. Internet Explorer 9에서 볼 때 같은 페이지는 여전히 IE9 모드로 나타납니다.

참조 <meta http-equiv = "X-UA 호환"content = "IE = edge">는 무엇을합니까?

새로운 Twitter Bootstrap을 사용하여 사이트를 만들고 있습니다. 사이트는 잘 보이고 IE8을 제외한 모든 필수 브라우저에서 작동합니다.

IE8에서는 모바일 버전의 요소를 표시하지만 내 데스크톱의 전체 화면에 걸쳐 펼쳐져 있습니다. 내가 가진 문제는 트위터 부트 스트랩이 모바일이라는 것입니다. 따라서 IE8이 어떤 이유로이 옵션을 사용합니다.

나는 또한 container 클래스가 의도 된대로 최대 너비의 CSS 속성을 가져 오지 않는 것으로 보입니다. 내가 잘못한 것을 누군가 볼 수 있습니까?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

CDN (bootstrapcdn.com)에서 CSS를 얻었습니다. respond.js는 로컬 파일에서만 작동합니다. 따라서 bootstrap.css의 로컬 복사본으로 IE8에서 웹 사이트를 시험해보십시오. 또는 읽으십시오 : CDN / X-Domain Setup

참고 사항 : https://github.com/scottjehl/Respond/pull/206

최신 정보:

읽으십시오 : http://getbootstrap.com/getting-started/#support

또한 Internet Explorer 8에서는 미디어 쿼리 지원을 활성화하기 위해 respond.js를 사용해야합니다.

또한보십시오 : https://github.com/scottjehl/Respond

이러한 이유로 기본 템플릿에는 헤드 섹션에 다음 행이 포함됩니다.

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

부트 스트랩 3을 사용하고 IE를 제외한 다른 브라우저에서 모든 것이 잘 작동한다면 아래를 시도하십시오.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

앞에서 설명한 바와 같이 두 가지 문제가 있습니다. 1) IE8은 미디어 쿼리를 지원하지 않습니다. 2) 크로스 도메인 CSS 파일과 함께 사용되는 respond.js는 앞서 설명한대로 포함되어야합니다.

BootstrapCDN을 사용하려면 다음과 같이 실행하십시오.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

또한 respond.proxy.gif, respond.min.js 및 response.proxy.js를 로컬 디렉토리에 복사하십시오.


나는 아래의 단계를 해결했다.

(1) Drupal 7에 대한 Respond.js 모듈이 설치되었습니다. (2) 모듈 폴더 대신 라이브러리에 설정된 drupal 7의 lessphp 모듈. (3) (3.1) <meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->  

테마 설정에서 cdn 부트 스트랩을 사용합니다.

자세한 내용을 보려면 drupal 디자인 및 개발 웹 사이트 블로그 ( www.devangsolanki.com)를 검토하십시오.


부트 스트랩 2에서 3으로 전환 할 때도 같은 문제가있었습니다. 이미 respond.js와 html5shiv.js를 얻었고 가장자리에 메타를 설정했습니다. 2에서 3까지 navbar 요소 유형이 변경된 것을 놓쳤습니다. 부트 스트랩 2에서 그것은 nav였습니다. 부트 스트랩 3에서는 이제 헤더가됩니다. 그래서 내가 가진 문제를 완전히 해결하기 위해

<meta http-equiv="X-UA-Compatible" content="IE=edge">

내 CSS를로드 한 후에 바로 넣어 :

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

그런 다음 변경하십시오.

<nav class="navbar" role="navigation">
</nav>

<header class="navbar" role="navigation">
</header>

오, 그리고 좋은 측정을 위해서 나는 또한 덧붙였다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

단순히 부트 스트랩 사이트 자체가 가지고 있기 때문입니다.


확인 후 :

  • DOCTYPE
  • X-UA 호환 메타 태그
  • html5shiv.js 및 respond.js 포함 (및 최신 버전 다운로드)
  • respond.js가 로컬 임
  • File : //이 아닌 웹 서버에서 사이트 호스팅
  • @import를 사용하지 않음
  • ...

여전히 col-lg, col-md 및 col-sm은 작동하지 않습니다. 마지막으로 부트 스트랩에 대한 참조를 html5shiv.js 및 respond.js에 대한 참조 이전으로 옮겼습니다.

다음은 스 니펫입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

나는 IE 10.0에서 같은 문제를 겪었다. 저는 이것이 OP에서의 문제가 아니라는 것을 압니다. 그러나 다른 사람들에게도 유용 할 것입니다.

제 경우에는 문서 시작 부분에 빈 줄이 있습니다.

[blank line]
<!DOCTYPE html>
<html lang="es">
...

빈 줄이 DOCTYPE과 태그 사이에 있으면 문제도 표시됩니다.

<!DOCTYPE html>
[blank line]
<html lang="es">

빈 줄을 제거하고 마법 X-UA 호환 메타가 없으면 IE 10이 사이트를 올바르게 렌더링하기 시작했습니다.

PHP와 Smarty를 사용하고 있다면 문제가되는 빈 줄을 추가하기 때문에 Smarty 주석을주의 깊게 살펴야합니다 :-)


제 경우에는 부트 스트랩이 CSS를 축소하여 문제를 일으키고있었습니다. IE8에서 부트 스트랩 3.0.2 (F12 개발자 도구를 사용하여 에뮬레이션 됨)를 응답하도록하려면 다음을 수행해야했습니다.

1 - X-UA 호환 플래그를 설정합니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2 - 부팅되지 않은 bootstrap.css를 bootstrap.min.css 대신 사용하십시오.

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - respond.js (및 html5shiv.js)를 추가하십시오.

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

내 머리 태그는 다음과 같습니다.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

로컬에서 시도해 보려면 ... localhost를 통해 시도하거나 QA 서버를 만들고 콘텐츠를 설정하고 시도하십시오.

bootstrap 3에 대해서는 respond.js가 필요하고, js에 넣고 헤더에 html로 추가하면 로컬 시스템에서 작동하지 않을 것입니다. 액세스가 거부되었다고 표시됩니다. 그것은 IE가 보안 제한을 가지고 있기 때문에 서버를 통해서만 작동합니다. :피


- <meta http-equiv="X-UA-Compatible" content="IE=edge">

나는 Bootstrap 3을 사용하고 있었다. - 나의 지역에서 IE에서 일하고 있었다.

IE에서 작동하지 않는 라이브를 넣었습니다.

Just Bootstrap은 템플릿에 해당 코드 줄을 포함시키지 않습니다. 이유는 모르지만 W3C와 호환되지 않을 수 있습니다.


그냥 머리로. 나는 똑같은 문제가 있었고 위의 어느 것도 나를 위해 그것을 고쳤다. 결국 respond.js@import 를 통해 참조 된 CSS를 구문 분석하지 않는다는 것을 알게되었습니다. 내 main.css @import 를 통해 가져온 전체 bootstrap.min.css 가있었습니다.

따라서 @import 를 통해 참조되는 미디어 쿼리가 포함 된 CSS가 없는지 확인하십시오.


bootstrapv2에서 v3으로 마이그레이션 할 때도 똑같은 문제가있었습니다.

이전 스팬 X를 col-sm-X로 대체하여 (나 같은) 마이그레이션 한 경우 col-X 클래스를 추가해야합니다. col-X는 @media 블록 외부에있는 스타일이므로 미디어 쿼리 지원없이 작동합니다.

컨테이너 폭을 수정하려면 @media 블록 외부에서 직접 설정할 수 있습니다. 같은 것 :

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

나는 똑같은 문제에 직면 해 첫 번째 해답을 시도했지만 뭔가 빠졌습니다.

여러분이 Webpack을 사용하고 있다면, css는 respond.js에서 지원하지 않는 스타일 태그로로드 될 것이므로 파일이 필요하므로 부트 스트랩이 CSS 파일로로드되었는지 확인하십시오

개인적으로 나는 extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

희망이 당신을 도울 것입니다.


부트 스트랩 소스를 별도로 연결해야합니다.

LESS 또는 SASS 를 사용하면 스타일을 컴파일하는 데 욕심을 가지지 않습니다. 내 프로젝트에서는 bootstrap.min.css 를 파일의 맨 위에있는 내 기본 스타일에 포함 시켰습니다. 따라서 모든 스타일에 대해 하나의 요청 만 있어야합니다.

그 때문에 부 풀랩 클래스가 제대로 작동하지 않았습니다. 별도로 추가하면 예상대로 작동합니다.


respond.js 를 페이지 하단에 놓고 body 태그를 닫기 전에 respond.js 링크를 클릭하고이 코드를 localhost에서 실행하십시오.

https://github.com/scottjehl/Respond


나는 모든 의견을 여기에서 읽고 모든 것을 시도했지만 Windows 7 - Internet Explorer 11 ( 문서 모드 : IE8 )에서 작동하지 못했습니다.

그런 다음 문서 모드 (IE8)를 실행하는 것이 실제 IE8과 같지 않으므로 Windows Virtual PC ( Internet Explorer 8이 설치된 Windows 7 )와 tadaaaa를 설치 했으므로 매력이 있습니다!

이 코드 조각을 페이지 맨 아래에 놓아서 제대로 작동하게 만듭니다.

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

이 문제에 대한 해결책이 있습니다. 사실 IE7과 8은 @media를 적절하게 지원하지 않으며 "col-md- *"클래스에 대한 CSS를 확인하면 너비가 992px의 미디어 너비로 지정됩니다. IE css 파일을 새로 작성하고 조건부 주석을 추가하십시오. 그런 다음 미디어 쿼리를 사용하여 직접 디자인에 필요한 클래스를 복사하면됩니다.


나는 여기에서 코드를 수정했다.

public class test extends Activity {
private WebView wv;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);
    wv = (WebView) findViewById(R.id.wv);
    String s = "&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt; &lt;title&gt;Saulify&lt;/title&gt; &lt;!-- All the Favicons... --&gt; &lt;link rel=&quot;shortcut icon&quot; href=&quot;/static/favicon/favicon.ico&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;57x57&quot; href=&quot;/static/favicon/apple-touch-icon-57x57.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;114x114&quot; href=&quot;/static/favicon/apple-touch-icon-114x114.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;72x72&quot; href=&quot;/static/favicon/apple-touch-icon-72x72.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;144x144&quot; href=&quot;/static/favicon/apple-touch-icon-144x144.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;60x60&quot; href=&quot;/static/favicon/apple-touch-icon-60x60.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;120x120&quot; href=&quot;/static/favicon/apple-touch-icon-120x120.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;76x76&quot; href=&quot;/static/favicon/apple-touch-icon-76x76.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;152x152&quot; href=&quot;/static/favicon/apple-touch-icon-152x152.png&quot;&gt; &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;/static/favicon/apple-touch-icon-180x180.png&quot;&gt; &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;/static/favicon/favicon-192x192.png&quot; sizes=&quot;192x192&quot;&gt; &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;/static/favicon/favicon-160x160.png&quot; sizes=&quot;160x160&quot;&gt; &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;/static/favicon/favicon-96x96.png&quot; sizes=&quot;96x96&quot;&gt; &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;/static/favicon/favicon-16x16.png&quot; sizes=&quot;16x16&quot;&gt; &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;/static/favicon/favicon-32x32.png&quot; sizes=&quot;32x32&quot;&gt; &lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#da532c&quot;&gt; &lt;meta name=&quot;msapplication-TileImage&quot; content=&quot;/static/favicon/mstile-144x144.png&quot;&gt; &lt;meta name=&quot;msapplication-config&quot; content=&quot;/static/favicon/browserconfig.xml&quot;&gt; &lt;!-- External CSS --&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;&gt; &lt;!-- External Fonts --&gt; &lt;link href=&quot;//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&#x27;//fonts.googleapis.com/css?family=Open+Sans:300,600&#x27; rel=&#x27;stylesheet&#x27; type=&#x27;text/css&#x27;&gt; &lt;link href=&#x27;//fonts.googleapis.com/css?family=Lora:400,700&#x27; rel=&#x27;stylesheet&#x27; type=&#x27;text/css&#x27;&gt; &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;!-- Site CSS --&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/static/css/style.css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/static/css/glyphicon.css&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container article-page&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-md-8 col-md-offset-2&quot;&gt; &lt;h2&gt;&lt;a href=&quot;http://www.huffingtonpost.com/2015/03/22/ted-cruz-climate-change_n_6919002.html&quot;&gt;Gov. Jerry Brown Says Ted Cruz Is &amp;#39;Absolutely Unfit&amp;#39; To Run For Office Because Of Climate Change Views&lt;/a&gt;&lt;/h2&gt; &lt;h4&gt;Sam Levine&lt;/h4&gt; &lt;div class=&quot;article&quot;&gt; &lt;p&gt;California Gov. Jerry Brown (D) said on Sunday that Texas Sen. Ted Cruz (R-Texas) is &quot;absolutely unfit to be running for office&quot; because of his position on climate change.&lt;/p&gt; &lt;p&gt;&quot;I just came back from New Hampshire, where there&#x27;s snow and ice everywhere. My view on this is simple: Debates on this should follow science and should follow data, and many of the alarmists on global warming, they have a problem because the science doesn&#x27;t back them up,&quot; Cruz &lt;a href=&quot;https://www.youtube.com/watch?v=m0UJ_Sc0Udk&quot;&gt;said&lt;/a&gt; on &quot;Late Night with Seth Meyers&quot; last week.&lt;/p&gt; &lt;p&gt;To back up his claim, Cruz cited satellite data that has shown a lack of significant warming over the last 17 years. But Cruz&#x27;s reasoning &lt;a href=&quot;http://www.politifact.com/truth-o-meter/statements/2015/mar/20 /ted-cruz/ted-cruzs-worlds-fire-not-last-17-years/&quot;&gt;has been debunked by Politifact&lt;/a&gt;, which has shown that scientists have ample evidence to believe that the climate will continue to warm.&lt;/p&gt; &lt;p&gt;&quot;What he said is absolutely false,” Brown said on &lt;a href=&quot;http://www.nbcnews.com/meet-the-press/california-governor-ted-cruz- unfit-be-running-n328046&quot;&gt;NBC&#x27;s &quot;Meet the Press.&quot;&lt;/a&gt; He added that &lt;a href=&quot;http://climate.nasa.gov/scientific-consensus/&quot;&gt;over 90 percent&lt;/a&gt; of scientists who study the climate agree that climate change is caused by human activity. &quot;That man betokens such a level of ignorance and a direct falsification of existing scientific data. It&#x27;s shocking, and I think that man has rendered himself absolutely unfit to be running for office,&quot; Brown said.&lt;/p&gt; &lt;p&gt;Brown added that climate change has &lt;a href=&quot;http://www.huffingtonpost.com/2015/03/06/california-drought-february- record_n_6820704.html?utm_hp_ref=california-drought&quot;&gt;caused droughts in his state&lt;/a&gt;, as well as severe cold and storms on the east coast.&lt;/p&gt; &lt;p&gt;While Cruz may have seen snow and ice everywhere in New Hampshire, data shows that the country is actually experiencing a &lt;a href=&quot;http://www.huffingtonpost.com/2015/02/19/cold-weather- winter_n_6713104.html&quot;&gt;warmer than average&lt;/a&gt; winter.&lt;/p&gt; &lt;p&gt;Brown’s criticism of Cruz comes one day before the Texas senator is set to announce a &lt;a href=&quot;http://www.huffingtonpost.com/2015/03/22 /ted-cruz-2016_n_6917824.html&quot;&gt;presidential campaign&lt;/a&gt;. &lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;original&quot;&gt; &lt;a href=&quot;http://www.huffingtonpost.com/2015/03/22/ted-cruz-climate-change_n_6919002.html&quot;&gt;VIEW ORIGINAL&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src=&quot;//code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/static/js/modal.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/static/js/bootbox.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/static/js/site.js&quot;&gt;&lt;/script&gt; &lt;script&gt; (function(i,s,o,g,r,a,m){i[&#x27;GoogleAnalyticsObject&#x27;]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,&#x27;script&#x27;,&#x27;//www.google-analytics.com/analytics.js&#x27;,&#x27;ga&#x27;); ga(&#x27;create&#x27;, &#x27;UA-56257533-1&#x27;, &#x27;auto&#x27;); ga(&#x27;send&#x27;, &#x27;pageview&#x27;); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;";


    wv.loadData(stripHtml(s), "text/html", "UTF-8");

}

public String stripHtml(String html) {
    return Html.fromHtml(html).toString();
}

}





html css twitter-bootstrap internet-explorer-8 twitter-bootstrap-3