python - jupyter 小部件，黑色背景和白色文本

Question

我正在尝试通过在 Jupyter 实验室中使用 add_class() 生成一个带有黑色背景和白色文本的 widgets.HBOX。以下是我的代码。

import ipywidgets as widgets
import numpy as np

%%html
<style>
.title_bg{
    width:auto;
    background-color:black;
    color: #ffffff
}
.box_style{
    width:40%;
    border : None;
    height: auto;
    background-color:black;
    color=white;
}
</style>

image = open("static/img/logo/logo.png", "rb").read()
hbox_layout = widgets.Layout()
hbox_layout.width = '100%'
hbox_layout.justify_content = 'space-around'

box_layout = widgets.Layout()
box_layout.width = '80px'
box_layout.height = '80px'
box_layout.border = '2px solid black'

image_box = widgets.Box()
image_box.layout = box_layout
image = widgets.Image(value=image, format='png')
image.layout.object_fit = 'contain'
image_box.children = [image]
image_box.margin = '2%'
image_box.add_class('box_sytle')

title01 = widgets.HTML('<h1> V-Gan </h1>', 
                       layout=widgets.Layout(align_content='stretch', 
                                             margin='1% 1% 1% 2% ', 
                                             width='15%'))
title02 = widgets.HTML('<h3> The Visualization of Glider Dashboard </h3>', 
                       layout=widgets.Layout(align_content='stretch', 
                                             align_items = 'center', 
                                             margin='1% 1% 1% -2%',
                                             width='45%',))
title01.add_class('title_bg')
title02.add_class('title_bg')
html_title = widgets.HBox([title01,title02], 
                          layout=widgets.Layout(justify_content='flex-start', 
                                                align_items='center',
                                                width='100%'))
html_title.add_class('box_style')

Left_Title = widgets.HBox([image_box, html_title], 
                          layout = widgets.Layout(
                              display='inline-flex', 
                              flex_flow='row',
                              justify_content='flex-start',
                              width='100%',
                              height='80px'
                          ))
Left_Title

html_link1 = widgets.HTML('<a href="https://https://gandalf.gcoos.org"> GANDALF </a>')
html_link2 = widgets.HTML('<a href=""> About </a>')
html_link3 = widgets.HTML('<a href=""> Support </a>' )
html_link1.add_class('title_bg')
html_link2.add_class('title_bg')
html_link3.add_class('title_bg')
Right_Title = widgets.HBox([html_link1, html_link2, html_link3], 
                          layout = widgets.Layout(
                              display='inline-flex', 
                              flex_flow='row',
                              justify_content='space-around',
                              width='100%',
                              height='100%'
                          ))
Right_Title

grid = widgets.GridspecLayout(10,10, 
                              weight='100%',
                              height='80px')
grid[:-2,:]= Left_Title
grid[-1,6:]= Right_Title 
grid

最后，Safari 上的 Jupyter 笔记本显示的结果如下：

但是，如果我使用“Chrome”或“FireFox”打开 Jupyter notebook，右下角的白色文字消失了，比如

有人能告诉我为什么我看到这种差异吗？

谢谢！

标签： pythonjupyter-notebookcross-browseripywidgets