Html 为什么运行KaTeX会改变我的页面'；是否将元素滚动到视图行为？
这真的很奇怪；我有一个简单的页面，我想使用锚链接来滚动视图中表的元素 我希望它的行为是这样的：--链接在顶部，表格在底部，相应的行滚动到视图中 问题是，当我启用KaTeX（调用Html 为什么运行KaTeX会改变我的页面'；是否将元素滚动到视图行为？,html,css,katex,Html,Css,Katex,这真的很奇怪；我有一个简单的页面，我想使用锚链接来滚动视图中表的元素 我希望它的行为是这样的：--链接在顶部，表格在底部，相应的行滚动到视图中 问题是，当我启用KaTeX（调用renderMathInElement）时，滚动行为会改变；相反，相关行跳到页面顶部，顶部的链接消失： 源代码非常简单（，复制如下） 为什么会发生这种情况？我如何修复？我已经使用Chrome的开发工具来检查CSS，我看不出有什么区别可以解释它 <!DOCTYPE html><html><hea
renderMathInElement<!DOCTYPE html><html><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/katex.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/katex.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/contrib/auto-render.min.js"></script>
<script type='text/javascript'>
window.addEventListener('DOMContentLoaded',function() {
if (window.location.search != '?nokatex')
{
renderMathInElement(document.body, {delimiters:
[
{left: "$$", right: "$$", display: true},
{left: "\\(", right: "\\)", display: false},
{left: "\\[", right: "\\]", display: true}
]
});
}
});
</script>
<style type='text/css'>
html, body {
height: 100%;
overflow: hidden;
}
div.top {
height: 45%;
}
div.container {
height: 50%;
overflow-y: scroll;
}
table {
border-collapse: collapse;
}
table, table td {
border: 1px solid black;
}
</style>
</head><body>
<div class="top">
<ul>
<li><a href="#5">Row 5</a></li>
<li><a href="#25">Row 25</a></li>
<li><a href="#50">Row 50</a></li>
<li><a href="#95">Row 95</a></li>
</div>
<div class="container">
<table>
<tr id='0'><td>0</td><td>\( x_{0} \)</tr>
<tr id='1'><td>1</td><td>\( x_{1} \)</tr>
<tr id='2'><td>2</td><td>\( x_{2} \)</tr>
<tr id='3'><td>3</td><td>\( x_{3} \)</tr>
<tr id='4'><td>4</td><td>\( x_{4} \)</tr>
<tr id='5'><td>5</td><td>\( x_{5} \)</tr>
<tr id='6'><td>6</td><td>\( x_{6} \)</tr>
<tr id='7'><td>7</td><td>\( x_{7} \)</tr>
<tr id='8'><td>8</td><td>\( x_{8} \)</tr>
<tr id='9'><td>9</td><td>\( x_{9} \)</tr>
<tr id='10'><td>10</td><td>\( x_{10} \)</tr>
<tr id='11'><td>11</td><td>\( x_{11} \)</tr>
<tr id='12'><td>12</td><td>\( x_{12} \)</tr>
<tr id='13'><td>13</td><td>\( x_{13} \)</tr>
<tr id='14'><td>14</td><td>\( x_{14} \)</tr>
<tr id='15'><td>15</td><td>\( x_{15} \)</tr>
<tr id='16'><td>16</td><td>\( x_{16} \)</tr>
<tr id='17'><td>17</td><td>\( x_{17} \)</tr>
<tr id='18'><td>18</td><td>\( x_{18} \)</tr>
<tr id='19'><td>19</td><td>\( x_{19} \)</tr>
<tr id='20'><td>20</td><td>\( x_{20} \)</tr>
<tr id='21'><td>21</td><td>\( x_{21} \)</tr>
<tr id='22'><td>22</td><td>\( x_{22} \)</tr>
<tr id='23'><td>23</td><td>\( x_{23} \)</tr>
<tr id='24'><td>24</td><td>\( x_{24} \)</tr>
<tr id='25'><td>25</td><td>\( x_{25} \)</tr>
<tr id='26'><td>26</td><td>\( x_{26} \)</tr>
<tr id='27'><td>27</td><td>\( x_{27} \)</tr>
<tr id='28'><td>28</td><td>\( x_{28} \)</tr>
<tr id='29'><td>29</td><td>\( x_{29} \)</tr>
<tr id='30'><td>30</td><td>\( x_{30} \)</tr>
<tr id='31'><td>31</td><td>\( x_{31} \)</tr>
<tr id='32'><td>32</td><td>\( x_{32} \)</tr>
<tr id='33'><td>33</td><td>\( x_{33} \)</tr>
<tr id='34'><td>34</td><td>\( x_{34} \)</tr>
<tr id='35'><td>35</td><td>\( x_{35} \)</tr>
<tr id='36'><td>36</td><td>\( x_{36} \)</tr>
<tr id='37'><td>37</td><td>\( x_{37} \)</tr>
<tr id='38'><td>38</td><td>\( x_{38} \)</tr>
<tr id='39'><td>39</td><td>\( x_{39} \)</tr>
<tr id='40'><td>40</td><td>\( x_{40} \)</tr>
<tr id='41'><td>41</td><td>\( x_{41} \)</tr>
<tr id='42'><td>42</td><td>\( x_{42} \)</tr>
<tr id='43'><td>43</td><td>\( x_{43} \)</tr>
<tr id='44'><td>44</td><td>\( x_{44} \)</tr>
<tr id='45'><td>45</td><td>\( x_{45} \)</tr>
<tr id='46'><td>46</td><td>\( x_{46} \)</tr>
<tr id='47'><td>47</td><td>\( x_{47} \)</tr>
<tr id='48'><td>48</td><td>\( x_{48} \)</tr>
<tr id='49'><td>49</td><td>\( x_{49} \)</tr>
<tr id='50'><td>50</td><td>\( x_{50} \)</tr>
<tr id='51'><td>51</td><td>\( x_{51} \)</tr>
<tr id='52'><td>52</td><td>\( x_{52} \)</tr>
<tr id='53'><td>53</td><td>\( x_{53} \)</tr>
<tr id='54'><td>54</td><td>\( x_{54} \)</tr>
<tr id='55'><td>55</td><td>\( x_{55} \)</tr>
<tr id='56'><td>56</td><td>\( x_{56} \)</tr>
<tr id='57'><td>57</td><td>\( x_{57} \)</tr>
<tr id='58'><td>58</td><td>\( x_{58} \)</tr>
<tr id='59'><td>59</td><td>\( x_{59} \)</tr>
<tr id='60'><td>60</td><td>\( x_{60} \)</tr>
<tr id='61'><td>61</td><td>\( x_{61} \)</tr>
<tr id='62'><td>62</td><td>\( x_{62} \)</tr>
<tr id='63'><td>63</td><td>\( x_{63} \)</tr>
<tr id='64'><td>64</td><td>\( x_{64} \)</tr>
<tr id='65'><td>65</td><td>\( x_{65} \)</tr>
<tr id='66'><td>66</td><td>\( x_{66} \)</tr>
<tr id='67'><td>67</td><td>\( x_{67} \)</tr>
<tr id='68'><td>68</td><td>\( x_{68} \)</tr>
<tr id='69'><td>69</td><td>\( x_{69} \)</tr>
<tr id='70'><td>70</td><td>\( x_{70} \)</tr>
<tr id='71'><td>71</td><td>\( x_{71} \)</tr>
<tr id='72'><td>72</td><td>\( x_{72} \)</tr>
<tr id='73'><td>73</td><td>\( x_{73} \)</tr>
<tr id='74'><td>74</td><td>\( x_{74} \)</tr>
<tr id='75'><td>75</td><td>\( x_{75} \)</tr>
<tr id='76'><td>76</td><td>\( x_{76} \)</tr>
<tr id='77'><td>77</td><td>\( x_{77} \)</tr>
<tr id='78'><td>78</td><td>\( x_{78} \)</tr>
<tr id='79'><td>79</td><td>\( x_{79} \)</tr>
<tr id='80'><td>80</td><td>\( x_{80} \)</tr>
<tr id='81'><td>81</td><td>\( x_{81} \)</tr>
<tr id='82'><td>82</td><td>\( x_{82} \)</tr>
<tr id='83'><td>83</td><td>\( x_{83} \)</tr>
<tr id='84'><td>84</td><td>\( x_{84} \)</tr>
<tr id='85'><td>85</td><td>\( x_{85} \)</tr>
<tr id='86'><td>86</td><td>\( x_{86} \)</tr>
<tr id='87'><td>87</td><td>\( x_{87} \)</tr>
<tr id='88'><td>88</td><td>\( x_{88} \)</tr>
<tr id='89'><td>89</td><td>\( x_{89} \)</tr>
<tr id='90'><td>90</td><td>\( x_{90} \)</tr>
<tr id='91'><td>91</td><td>\( x_{91} \)</tr>
<tr id='92'><td>92</td><td>\( x_{92} \)</tr>
<tr id='93'><td>93</td><td>\( x_{93} \)</tr>
<tr id='94'><td>94</td><td>\( x_{94} \)</tr>
<tr id='95'><td>95</td><td>\( x_{95} \)</tr>
<tr id='96'><td>96</td><td>\( x_{96} \)</tr>
<tr id='97'><td>97</td><td>\( x_{97} \)</tr>
<tr id='98'><td>98</td><td>\( x_{98} \)</tr>
<tr id='99'><td>99</td><td>\( x_{99} \)</tr>
</table>
</div>
</body>
</html>
addEventListener（'DOMContentLoaded'，function（）{
if（window.location.search！='？nokatex'）
{
RenderManElement（document.body，{分隔符：
[
{左：$$，右：$$，显示：true}，
{左：\\（“，右：\\）”，显示：false}，
{左：“\\[”，右：“\\]”，显示：true}
]
});
}
});
html，正文{
身高：100%；
溢出：隐藏；
}
顶舱{
身高：45%；
}
分区集装箱{
身高：50%；
溢出y：滚动；
}
桌子{
边界塌陷：塌陷；
}
表，表td{
边框：1px纯黑；
}
0\（x{0}\）
1 \（x{1}\）
2 \（x{2}\）
3 \（x{3}\）
4 \（x{4}\）
5 \（x{5}\）
6 \（x{6}\）
7\（x{7}\）
8\（x{8}\）
9\（x{9}\）
10\（x{10}\）
11\（x{11}\）
12 \（x{12}\）
13 \（x{13}\）
14 \（x{14}\）
15\（x{15}\）
16 \（x{16}\）
17 \（x{17}\）
18 \（x{18}\）
19 \（x{19}\）
20\（x{20}\）
21\（x{21}\）
22\（x{22}\）
23\（x{23}\）
24\（x{24}\）
25\（x{25}\）
26\（x{26}\）
27\（x{27}\）
28\（x{28}\）
29\（x{29}\）
30\（x{30}\）
31\（x{31}\）
32\（x{32}\）
33\（x{33}\）
34\（x{34}\）
35\（x{35}\）
36\（x{36}\）
37\（x{37}\）
38\（x{38}\）
39\（x{39}\）
40\（x{40}\）
41\（x{41}\）
42\（x{42}\）
43\（x{43}\）
44\（x{44}\）
45\（x{45}\）
46\（x{46}\）
47\（x{47}\）
48\（x{48}\）
49\（x{49}\）
50\（x{50}\）
51\（x{51}\）
52\（x{52}\）
53\（x{53}\）
54\（x{54}\）
55\（x{55}\）
56\（x{56}\）
57\（x{57}\）
58\（x{58}\）
59\（x{59}\）
60\（x{60}\）
61\（x{61}\）
62\（x{62}\）
63\（x{63}\）
64\（x{64}\）
65\（x{65}\）
66\（x{66}\）
67\（x{67}\）
68\（x{68}\）
69\（x{69}\）
70\（x{70}\）
71\（x{71}\）
72\（x{72}\）
73\（x{73}\）
74\（x{74}\）
75\（x{75}\）
76\（x{76}\）
77\（x{77}\）
78\（x{78}\）
79\（x{79}\）
80\（x{80}\）
81\（x{81}\）
82\（x{82}\）
83\（x{83}\）
84\（x{84}\）
85\（x{85}\）
86\（x{86}\）
87\（x{87}\）
88\（x{88}\）
89\（x{89}\）
90\（x{90}\）
91\（x{91}\）
92\（x{92}\）
93\（x{93}\）
94\（x{94}\）
95\（x{95}\）
96\（x{96}\）
97\（x{97}\）
98\（x{98}\）
99\（x{99}\）
position:absoluteposition:relativediv.container {
height: 50%;
overflow-y: scroll;
position: relative;
}