How bootstrap solves browser compatibility issues
Bootstrap is the most popular HTML, CSS and JS framework for developing responsive layout, mobile-first WEB projects.
Bootstrap comes from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JavaScript, and it is simple and flexible. During the development process, we only need to add the corresponding class to the DOM element to call it, making Web development faster.
Let’s get into the topic and talk about Bootstrap 3 browser compatibility issues and their corresponding solutions:
1. Mobile device support
2. PC support
Note: Windows supports IE 8-11.
Please refer to Browser Support for detailed support of Bootstrap 3 on various browsers.
Related recommendations: "Bootstrap Getting Started Tutorial"
As shown above, IE8 is supported. However, many CSS3 properties and HTML5 elements are not supported. For example, Bootstrap's responsive layout is implemented through the Media Query function of CSS3, which matches different styles according to different resolutions. IE8 browser does not support this excellent CSS3 feature. Bootstrap has clearly pointed out in the development documentation that IE8 requires Respond.js to support media queries. According to the official documentation, the author added the following code at the bottom of the
tag of the HTML file:<!--[if lt IE 9]> <script ></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> <![endif]-->
Note: The html5shiv.min.js file does not (fully) support html5. The browser supports html5 tags; the respond.js file allows IE8 to support media queries.
However, when I opened the page in the IE8 browser, I found that the compatibility issue had not been resolved (pit, pit, pit). By consulting relevant information, the author summarizes a few points to note (the key to achieving the effect):
(1) Local debugging requires a Web Server (such as IIS, Apache, Nginx), and simply opening the file locally cannot see the compatibility Effect;
(2) If you find that respond.js and Bootstrap have been referenced, but still no effect, please check whether your Bootstrap uses a CDN file;
(3) Bootstrap3 requires Html5 Document statement;
(4) Jquery version needs to be below 2.0.
The template code is as follows:
<!DOCTYPE html> <html> <head> <!-- 编码格式 --> <meta charset="UTF-8"> <title></title> <!-- 作者 --> <meta name="author" content="author"> <!-- 网页描述 --> <meta name="description" content="hello"> <!-- 关键字使用","分隔 --> <meta name="keywords" content="a,b,c"> <!-- 禁止浏览器从本地机的缓存中调阅页面内容 --> <meta http-equiv="Pragma" content="no-cache"> <!-- 用来防止别人在框架里调用你的页面 --> <meta http-equiv="Window-target" content="_top"> <!-- content的参数有all，none，index，noindex，follow，nofollow，默认是all --> <meta name="robots" content="none"> <!-- 收藏图标 --> <link rel="Shortcut Icon" href="favicon.ico" rel="external nofollow" > <!-- 网页不会被缓存 --> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <!-- 解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 页面按原比例显示 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="plugin/bootstrap-3.3.0/css/bootstrap.min.css" rel="external nofollow" > <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> <![endif]--> </head> <body> <script src="plugin/jquery/jquery-1.11.2.min.js"></script> </body> </html>
The above is the detailed content of How bootstrap solves browser compatibility issues. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20516
7
13629
4
How does CSS adapt to the layout of large-screen TV browsers such as TV_CSS styles optimized through long-distance interaction
Mar 05, 2026 pm 08:57 PM
TV browser disables:hover, you need to use:focus-visible to simulate focus; unit priority is vh/vw; scroll-snap needs to be combined with smooth; high-resolution screens use box-shadow scale to replace the 1px border.
Why can't you take a screenshot or save your mnemonic phrase online?
Mar 05, 2026 pm 03:30 PM
Mnemonic phrase security needs to prevent five types of risks: 1. Screenshots causing leakage of photo albums and clouds; 2. Online storage being hijacked through multiple links; 3. System cache retaining copies; 4. Cloud input method uploading content; 5. Browser developer tools capturing DOM plain text.
How to customize core components of CSS through Bootstrap's Sass source code_modify variables and recompile the css framework
Mar 06, 2026 pm 01:54 PM
To make Bootstrap's $primary and other variables take effect, they must be imported in order in the custom SCSS file: first declare the variables, then import functions, variables, mixins, and finally import bootstrap; otherwise, the variables will fall back to their default values.
How to put web shortcuts on the desktop in Google Chrome_Google Chrome application tutorial
Mar 16, 2026 pm 06:24 PM
Google Chrome provides five methods for creating web desktop shortcuts: 1. Install the PWA through the address bar; 2. Manually create the "Open as window" shortcut through the menu; 3. Start the independent application mode with command line parameters; 4. Enable the chrome://flags experimental function to unlock universal installation; 5. Use developer tools to verify and trigger the installation.
How to close the Office shortcut entry in the sidebar of the Edge browser_Edge browser tools are streamlined
Mar 16, 2026 pm 07:36 PM
There are five methods to remove the Office shortcut entry in the Edge sidebar: 1. Turn off the Office display switch in Settings → Sidebar; 2. Disconnect Office service permissions in Account Management; 3. Disable Office sidebar integration in edge://flags; 4. Create a new OfficeSidebarEnabled value through the registry and set it to 0; 5. Delete Office-related folders and configuration files in the Edge cache.
How to fix common tabs in Google Chrome_Tutorial on how to lock Google Chrome
Mar 16, 2026 pm 04:57 PM
There are five ways to lock frequently used website tabs in Chrome: 1. Right-click and select "Pin Tab"; 2. Drag to the far left to automatically pin; 3. Set the tab to automatically restore pinned web pages at startup; 4. Enable the experimental fixed width function in chrome://flags; 5. Install third-party extensions to achieve batch pinning and advanced management.
How to delete history in Zeus Browser_Zeus Browser trace cleaning tutorial
Mar 16, 2026 pm 06:18 PM
Zeus Browser has four ways to clear history: clear all with one click, filter and delete by keywords, automatically clean when exiting, and deep combination clean, which are respectively adapted to quick reset, precise prevention of accidental deletion, long-term worry-free and privacy-sensitive scenarios.
How to turn off the Game Center in the sidebar of Edge browser_Hide the entertainment module of Edge browser
Mar 16, 2026 pm 05:00 PM
There are four ways to turn off the Edge sidebar Game Center: 1. Turn off the Game Center switch in Settings → Sidebar; 2. Visit edge://flags/#edge-games-hub and disable it; 3. Enable the "Block entertainment and game-related content" policy through gpedit.msc; 4. Create a new temporary configuration file to verify and reset the default settings.
