为什么 React 页面在 Ubuntu 浏览器上看起来不错，但在 Windows 浏览器上却不行？答案

【问题标题】：Why would a React page look fine on Ubuntu browsers, but not Windows browsers?为什么 React 页面在 Ubuntu 浏览器上看起来不错，但在 Windows 浏览器上却不行？
【发布时间】：2023-03-10 00:49:01
【问题描述】：

我什至不知道从哪里开始解决这个问题，所以任何一般性提示都会有所帮助。

我在我的 Ubuntu 机器上创建了一些简单的 React 页面（仅限前端；静态；使用 create-react-app）。我正在创建一个优化的构建，他们将其移动到网上。

页面在这里，如果你想看看它是否在你的浏览器中工作：static website

当我在 Ubuntu 机器上使用 Chrome 或 Firefox 浏览器时，页面和 React 组件看起来都很好。

但是，当我在 Windows 7 机器上使用 Chrome 或 Firefox 浏览器时，页面无法正常工作。具体来说，除了顶级组件之外，没有一个 React 组件显示出来，并且显示的内容没有使用 CSS 正确格式化（我正在使用 react-bootstrap 进行格式化）。

这是我的一个 Ubuntu 浏览器上的页面：

web site working on Ubuntu browser

这是 Windows 上的同一个站点：

web site not working in Windows browser

这两个地方的控制台都没有错误消息。

我猜这其中涉及一些简单的事情，但我终其一生都无法弄清楚它可能是什么。有什么想法吗？

注意事项

我在 Ubuntu 上的 Chrome 版本是 63.0.3238.108（官方版本）（64 位）。我在 Windows 上的 Chrome 版本是 64.0.3282.140 (Official Build) (64-bit)。

我在两个版本的 Chrome 上都将 React 开发者工具作为一个扩展，并且都声明“此页面正在使用 React 的生产版本。”

额外的组件（未显示在 Windows 浏览器中）都可以通过状态更改访问。以下是我拍摄的页面的完整代码：

注意 - 我确实将“class”更改为“className”，但 Windows 上的问题仍然存在。

import React, { Component } from 'react';
import { PageHeader, Tabs, Tab } from 'react-bootstrap';
import 'bootstrap/less/bootstrap.less';
import './index.css';

import HomePanel from './HomePanel';
import AboutPanel from './AboutPanel';
import BlogPanel from './BlogPanel';
import ProgramPanel from './ProgramPanel';
import GamePanel from './GamePanel';
import Footer from './Footer';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {key: 1};
  }
  handleSelect(key) {
    this.setState({key});
  }
  render() {
    return (
      <div>
        <header>
        <PageHeader>
          <h1 className="mainHeader">Aphorism 44</h1>
          <h3 className="mainHeader">Playing Around with Code...</h3>
        </PageHeader>
        <Tabs onSelect={ (e)=>this.handleSelect(e)} 
activeKey={this.state.key}>
          <Tab eventKey={1} title="Home"><HomePanel/></Tab>
          <Tab eventKey={2} title="About"><AboutPanel/></Tab>
          <Tab eventKey={3} title="Blogs"><BlogPanel/></Tab>
          <Tab eventKey={4} title="Programs"><ProgramPanel/></Tab>
          <Tab eventKey={5} title="Games"><GamePanel/></Tab>
        </Tabs>
        </header>
        <Footer/>
      </div>
    );
  }
}

export default App;

添加 React 开发工具后，我在两个操作系统上都收到以下控制台错误，但问题仅在 Windows 上出现：

Service Worker 注册期间出错：DOMException: Only secure origins are allowed.

【问题讨论】：

我有 Ubuntu，所以我在 Windows 上看到的一样......所以问题不是它的 windows 浏览器
so.. 这绝对与加载引导 css 的方式有关。仍在试图弄清楚为什么某些样式没有被应用。特别是.fade 的不透明度为 0，这会导致没有任何内容出现。删除该样式您可以看到内容
您能在您的应用中显示与加载 css 相关的代码行吗？像 javascript 导入
ohhhhhhhh 你用的是class 不是className ???
ReactJS CSS Class not working的可能重复

标签： windows reactjs ubuntu react-bootstrap

【解决方案1】：

关于 LESS 文件，Azium 是正确的。

我将其更改为常规的 Bootstrap CSS 文件，并导入该文件而不是 LESS 文件。

它又起作用了。

我不知道为什么一开始就坏了，但现在好了。

【讨论】：