tra-loi-cau-hoi-phat-trien-web.com

Làm cách nào để sửa Twitter-bootstrap trên IE?

Thanh điều hướng dường như không hoạt động đúng trong IE. Đây là một ảnh chụp màn hình của nó trong IE.

screenshot

Tôi đã xem qua nhiều chủ đề bootstrap trên stackoverflow.com, nhưng "trợ giúp" họ cung cấp cho mọi người không hiệu quả với tôi.

Sau thẻ cơ thể:

<div class="container">
    <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="?id=home">OnniServer.tk</a>
                    <div class="nav-collapse">
                    <ul class="nav">
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == home)) { echo "class='active'"; } ?>><a href="?id=home">Home</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { echo "class='active'"; } ?>><a href="?id=donate">Donate</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == about)) { echo "class='active'"; } ?>><a href="?id=about">About</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { echo "class='active'"; } ?>><a href="?id=staff">Staff</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { echo "class='active'"; } ?>><a href="?id=vote">Vote</a></li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Play now: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="minecraft">In browser</a></li>
                                <li><a href="http://minecraft.net">Buy it now</a></li>
                                <li><a href="#">No link for crack</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Perms for: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="?id=citizen">Citizen(s)</a></li>
                                <li><a href="?id=vip">VIP(s)</a></li>
                                <li><a href="?id=vipplus">VIP+(s)</a></li>
                                <li><a href="?id=modjr">Jr. Moderator(s)</a></li>
                                <li><a href="?id=mod">Moderator(s)</a></li>
                                <li><a href="?id=admin">Admin(s)</a></li>
                                <li><a href="?id=owner">Owner</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Mail to: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="mailto:[email protected]">Onni (server Owner)</a></li>
                            </ul>
                    </li>
                    <script>
                        $('.dropdown-toggle').dropdown()
                    </script>
                    </ul>
                    </div>
                </div>
            </div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="hero-unit">
        <style "text/css">
        </style>
        <?php
        if (((isset($_GET['id'])) &&($_GET['id'] == home)) || (!isset($_GET['id']))) { include('home.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { include('donate.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == about)) { include('about.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { include('staff.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { include('vote.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == citizen)) { include('permissions/citizen.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vip)) { include('permissions/vip.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vipplus)) { include('permissions/vipplus.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == modjr)) { include('permissions/modjr.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == mod)) { include('permissions/mod.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == admin)) { include('permissions/admin.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == owner)) { include('permissions/owner.html'); };
        ?>
    </div>
</div>
40
Onni Bucht

Bạn cần đặt <!DOCTYPE HTML> trong dòng đầu tiên của html.

65
Facundo Pedrazzini

Bạn có thể thêm thẻ meta:

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

Một lời giải thích ngắn gọn về nó là gì và cách thức hoạt động được tìm thấy trên link này. 

51
tux

Chỉ để hoàn thiện - đáng chú ý là với Bootstrap 3, theo tài liệu , hãy đảm bảo cấu trúc sau trong trang của bạn. Nó đã giải quyết các vấn đề tôi gặp phải với IE9 và v3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- content -->
</body>
</html>
19
SteveChapman

Không chắc chắn nếu nó sẽ khắc phục vấn đề cụ thể của bạn nhưng dù sao cũng đáng chia sẻ.

Tôi gặp vấn đề với dây đeo khởi động Twitter trong IE. Không có góc tròn. Menu điều hướng không sụp đổ. Khoảng cách không ngồi đúng vị trí, thậm chí một số hình ảnh không hiển thị.

Thật kỳ lạ, trang web hoạt động ổn trong IE khi chạy qua trình gỡ lỗi của studio trực quan, nó đã từng được triển khai đến một máy chủ mà sự cố xảy ra.

Hãy thử sử dụng IE công cụ dành cho nhà phát triển (F12 là phím tắt) Kiểm tra chế độ trình duyệt và chế độ tài liệu của bạn. (nó ở trên cùng dọc theo thanh menu)

Vấn đề xảy ra với tôi vì tài liệu là IE7 và trình duyệt tương thích với IE10 .. Tôi đã thêm một tiêu đề http trong IIS: Tên X-UA-Tương thích Giá trị IE = EmulationIE9

Bây giờ trang tải dưới dạng tài liệu - tiêu chuẩn IE9, khả năng tương thích IE10 của trình duyệt và tất cả các vấn đề trước đó đã được giải quyết.

Hi vọng điêu nay co ich.

-tessi

6
tessi

Cần bao gồm hai tập lệnh này cho IE

<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
6
Palani Kumar

Nếu bạn ở trong mạng nội bộ và các cài đặt được đặt thành chế độ tương thích, thì các loại tài liệu và answer.js thích hợp là không đủ.

Vui lòng tham khảo liên kết này để biết thêm thông tin: Buộc chế độ tài liệu IE8 hoặc IE9 theo tiêu chuẩn và xem câu trả lời của Ralph Bacon.

Nó sẽ giống như thế này:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4
Emperor Krauser

Tôi đã có cùng một vấn đề và không có câu trả lời nào khác có hiệu quả. Vấn đề của tôi là một vấn đề kỳ lạ khi IE9 không thể kết nối với bất kỳ trang web https nào, do đó tôi đang sử dụng các tệp bootstrap maxcdn trực tuyến như,

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

không có css và js nào được áp dụng. Đi vào tab Nâng cao của các tùy chọn Internet Explorer Tôi đã xác minh rằng việc không kiểm tra "sử dụng TLS 1.0" đã gây ra sự cố với các trang web và tệp https và khi kiểm tra trang bootstrap của tôi được định dạng như mong đợi.

Như những người khác đã lưu ý sử dụng loại tài liệu phù hợp bên dưới (có thể tài liệu html4 hợp lệ sẽ hoạt động, nhưng nếu bạn bắt đầu lại thì cũng có thể sử dụng html5.)

Phản hồi js và html5 shim (nếu sử dụng) dành cho IE8. IE9 không cần điều đó. Mã bên dưới sử dụng phương pháp nhắm mục tiêu eg8 trở xuống.

--Nghệ thuật

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- content -->
</body>
</html>
3
aamarks

Tôi đã có vấn đề này gần đây. Tôi đã thực hiện các cài đặt này thay đổi. Và nó đã làm việc cho tôi. !

verify these settings

2
chineerat

Internet Explorer có số dòng mã tối đa để nhận dạng biểu định kiểu. 

Đây là quy tắc kiểu thanh điều hướng Bootstrap đặt thuộc tính float cho các mục thanh điều hướng:

.navbar-nav > li {
    float: left;
}

Quy tắc đó trong Bootstrap 3 (có thể ở các phiên bản đầu tiên) nằm trên dòng 5247. 

Như đã nói ở đây: Giới hạn quy tắc CSS của Trình thám hiểm Internet , một trang tính có thể chứa tới 4095 dòng.

2
Guzman Iglesias

Tôi đã gặp một vấn đề tương tự . Trong trường hợp của tôi, nhìn vào CSS tôi đã tìm thấy một position: initial.

Sau một số nghiên cứu, tôi thấy rằng trình duyệt di động IE không hỗ trợ nó.

Tôi chỉ cần đặt một position: relative thay vào đó và mọi thứ hoạt động tốt.

1
Renato Oliveira

Tôi cũng có vấn đề tương tự. Tôi đặt dòng mã sau vào phần đầu của tệp bố cục của mình và tất cả dường như đều ổn.

<meta http-equiv="X-UA-Compatible" content="IE=9">
1
Jason

Nếu bạn đang sử dụng bố cục đáp ứng, hãy thử đưa js này vào mã của bạn: https://github.com/scottjehl/Ronymous

0
rizidoro

Vui lòng đặt các trang trong localhost và thử

0
RiyAs MuhaMmed